lazy load is removing inline css

  • Resolved e dev

    (@efishinsea)


    1 year, 11 months ago

    I found on our site that the lazy loading functionality (or something with Smush in general) is removing in-line CSS when used in page templates.

    When doing something like this:

    <li <?php if (get_sub_field('slide-image')) :?> style="background:url('<?php echo #slide-image');?>') no-repeat center center; background-size:cover;"<?php endif;?> >

    …the lazy-loaded rendered HTML looks like this, without the background-size rule:

    <li style="background: url('https://somesite.com/wp-content/uploads/2023/09/ROD534aR85.jpg') center center no-repeat;" class="flex-active-slide lazyloaded" data-thumb-alt="">

    It did not used to do this and we only noticed because suddenly images on our site and in sliders etc. suddenly stopped ‘fitting’ where they were designed to fit. I added some styles to my stylesheet to override this unfortunate feature but needed an !important to make that work.

    Disabling the plugin makes all of these problems go away, so it’s something with SMUSH.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter e dev

    (@efishinsea)

    1 year, 11 months ago

    toggling the “Enable native lazy loading” option resolves this issue, but the other method ought not to be removing the code in the first place.

    Plugin Support Saurabh – WPMU DEV Support

    (@wpmudev-support7)

    1 year, 11 months ago

    Hello @efishinsea

    Hope you’re doing well today! I am sorry to hear about the issue you’re facing.

    Based on the description you’ve shared, I was able to replicate the scenario and the issue with background-size attribute on my test site with Smush lazyload enabled. I was also able to notice that when the Native Lazyloading is enabled, it works as expected.

    Thank you for your detailed input, it looks to be a bug and I’ve already escalated it to our Smush team for further checks. We’ll update you on this topic after we have further information from the Smush team.

    In the meantime, if you don’t wish to enable Native Lazyloading, you can also try replacing the “style=”background:url” in your code with “style=’background-image: url” and test if that helps.

    I’ve tested this on my lab envrionment and it worked as expected when I used “style=’background-image: url” instead of “background:url”

    Kind Regards,
    Saurabh

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    1 year, 11 months ago

    Hi @efishinsea,

    Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to open a new thread if you have new queries.

    Best Regards
    Nithin

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘lazy load is removing inline css’ is closed to new replies.