Section Background Overlay Images Do Not Render on iOS and Safari (Elementor)

  • Jan Kovar

    (@janko11)


    4 years ago

    Hi Albert!

    First of all, thank you so much for this plugin! It has been a tremendous help in optimising multiple of our sites.

    We have encountered an issue while using Elementor and its ability to put a background overlay image on a section while having background image defined as well.

    It fails to render on iOS devices (tested on iPad, iPhone 6, Xs, 11 and 12) in Safari and Chrome. Also on MacBook 16″ 2020 in Safari on any viewport widths.

    While in Inspect tool in Safari, the image URL is accessible and is applied correctly as a CSS rule. Though, for some reason, if going to “Sources” in the Inspect tool, there are two files named the same. One returns: “An error occurred trying to load the resource.” and the other: “Resource has no content”.

    The weirdest thing about this is that it only happens to images which are solid colours or gradients (tested with #FF0000, #FFFFFF #FFFFFE and a vertical gradient from #000000 to #FFFFFF). All of these images were exported through Photoshop or XD (on Mac). Once changed to an actual photograph, the image renders perfectly.

    The issue can be also fixed by turning off Optimize Images in CSS within PhastPress.

    The issue is reproducible. Tested on three separate websites.

    The overlay image renders perfectly within Elementor page builder interface (any device), in Chrome (Android, Mac, Windows), Firefox (Windows, Mac), Opera (Windows, Mac).

    Any chance this could be looked into please? Would be happy to provide more information. ??

    Have a good weekend!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Albert Peschar

    (@kiboit)

    Hi @janko11,

    This is super weird. It has to do with the image. PhastPress compresses the image to WebP and Safari does not like this.

    I can reproduce the issue on a machine with Safari 14.0.3 by copying the overlay image and embedding it in a minimal page here:

    https://peschar.net/files/broken-bg.php

    However, on Safari 14.0.1 it seems to work fine:

    This seems to be a bug in Safari. I will investigate a little more and see if there’s something I can do about this. For now, you have the option to disable image optimization on affected sites.

    –Albert

    Thread Starter Jan Kovar

    (@janko11)

    Thank you so much, Albert!

    I assume the reason it does not work in Chrome on iOS devices is because Chrome on iOS is almost the same as Safari?

    Plugin Author Albert Peschar

    (@kiboit)

    Hi @janko11,

    On iOS, all browsers use the same rendering engine (WebKit) underneath. So there will never be rendering differences.

    I’ve updated my testing page with a few additional WebP images created in the GIMP. Most of them are images with solid colours. Two of them are more complex. Even those these images are created with the same tools, only the images that contain more than just solid colors load:

    https://peschar.net/files/broken-bg.php

    In Safari 14.0.3:

    In Safari 14.0.1:

    I will disable PhastPress’ WebP optimization for Safari 14.0.3 and try to submit a bug report with Apple about this.

    –Albert

    Plugin Author Albert Peschar

    (@kiboit)

    Hi @janko11,

    I’ve submitted a bug report with Apple.

    As it’s difficult to distinguish between browser versions that exhibit this bug and those that do not, I won’t change anything in PhastPress for now.

    If you need to use images that trigger this problem on your site, I would suggest disabling PhastPress’ image optimization.

    For this particular case, you can also use a CSS background color or gradient instead of an image for the overlay:

    body .elementor-8 .elementor-element.elementor-element-969fca9 > .elementor-background-overlay { background: red; }

    Just add this to your CSS somewhere, and it should override the background image used by Elementor.

    Good luck! And enjoy your weekend.

    –Albert

    Thread Starter Jan Kovar

    (@janko11)

    Hi @kiboit,

    Thank you very much for your swift investigation as well as for submitting the bug report with Apple.

    Most understandable with the difficulty distinguishing the browser versions. We stumbled upon the issue by a complete accident as using solid colours for background overlays is something we rarely do. And so it is not necessarily a big issue for us, we have already used CSS filters instead, we just wanted to raise the issue with you so that you are aware of it. ??

    Also, thank you for answering my question on the rendering engine within iOS!

    Looking forward to hearing from Apple.

    Have a great start of your week!

    — Jan

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Section Background Overlay Images Do Not Render on iOS and Safari (Elementor)’ is closed to new replies.

Tags