0

We have a page that contains 20 .svg images. Page renders completely fine on first load for all of the devices that we tested but specifically for iPhone 6 and iPhone 6 Plus once we scrolled the page to bottom or to top a little fast images gets disappeared and it takes time to re-render it I have tried couple different solutions but none of them seem to work. I would really appreciate some help.

The page that I have been facing problem with : https://transform.makeen.io/forms

Video from an iPhone 6 :

https://youtu.be/XPQza2fDzjs

Video from an iPhone 8 :

https://youtu.be/OKbTUORQAG4

Thanks

ocliptus
  • 16

1 Answers1

0

This might be related loading="lazy". Since Wordpress 5.5 by default loading="lazy" is applied to images as it became a native browser behaviour.

We can disable this native behaviour by using this filter wp_lazy_loading_enabled hook filter in your function.php.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

As per the Can I Use the support for attribut loading="lazy" is still has a global of only 72.72%.

IE Edge Firefox Chrome Safari IOS Safari
Not Supported Supported Partial Support Supported Not Supported but can be enabled Not Supported but can be enabled

As you can see IOS doesn't support it by default which may cause some loading problem.

If you move forward with this I would suggest switching back to an old-school lazy loading method or perhaps a page transition loader.

Learn more

amarinediary
  • 4,930
  • 4
  • 27
  • 45
  • 1
    Unfortunately this is not the case if it was related to Safari it wouldn't render the images on iPhone 8 too. To make sure I apply the suggested solution but still it takes too much time to render it on iPhone 6. Thank you anyways :) – ocliptus Jan 12 '21 at 12:39