Search code examples
htmlwebflow

Why lazy loading on img is broken on mobile browser (iOS)?


I made a website using webflow, in this website I have one icon that is load using :

<img src="yoursuper.svg" loading="lazy">

Nothing too crazy and it works as expected on the browser, but on iPhone (I never tried on Android) the website goes crazy and reload an infinite number of time or just crash instantly showing 'a problem repeaditly occured' on the screen. If I disable javascript the website is working fine. If I put loading="eager" everything works as expected. Nothing shows up inside the console and redirectdetective.com report was totally normal.

2 weeks before the website was working as expected on phone and the code did not change since this two weeks.

Did someone have any idea of why loading="lazy" can break a website on phone ?


Solution

  • It says right here on the CanIUse that the loading="lazy" attribute is not yet supported on any version of Safari unless the browser is manually put in Experimental Mode. For browser specific issues it is always good to check caniuse for compatibility. If you want Safari support you will need to choose a different method or use a polyfill like this one.