Lazy Loading images in iOS Safari
Permalink Browser Info Environment
I have been testing the optimisation settings to see the performance gains in page speed insights which seem to be working effectively.
One thing which is confusing me is the lazy loading images element seems to prevent images loading at all when I check my iPhone (iOS 13 using Safari). I had previously set up an override to the default image view template to include which I though may have cause the issue so I have now removed that and I still get the same issue with images not loading.
This includes the header image which requires no scrolling before it is in screen when loading the page -http://fullersfamilylaw.com. I have disabled the add on for the moment until I can get to the bottom of this issue.
I have attached screengrabs of the home page with and without the add-on enabled...
One thing which is confusing me is the lazy loading images element seems to prevent images loading at all when I check my iPhone (iOS 13 using Safari). I had previously set up an override to the default image view template to include
loading="lazy"
This includes the header image which requires no scrolling before it is in screen when loading the page -http://fullersfamilylaw.com. I have disabled the add on for the moment until I can get to the bottom of this issue.
I have attached screengrabs of the home page with and without the add-on enabled...
| Type: | Pre-Sale |
|---|---|
| Status: | Resolved |
Sorry, i mis-typed the url which is secured -http://fullersfamilylaw.com
Hello,
Thank you for your message. Safari does sometimes act up. Can you confirm that it works normally on other devices?
To be able to troubleshoot the problem I'd need to see it in action so could you enable the optimization or give me access to the dashboard so I can have a look?
Thank you
Thank you for your message. Safari does sometimes act up. Can you confirm that it works normally on other devices?
To be able to troubleshoot the problem I'd need to see it in action so could you enable the optimization or give me access to the dashboard so I can have a look?
Thank you
Hi
I replied to this issue directly through email back at the beginning of June but I see it is not showing up in the discussion so you may not have seen it?
I had enabled the add-on once again and cleared the cache so you could see the issue in action but I have had to disable it once again as I was seeing the same issue in other mobile devices also.
If you have time to look into the issue I can enable it once again so you can look into it. If you still require dashboard access to look at the config then let me know the email address I need to add you as a user.
Thanks for your help.
I replied to this issue directly through email back at the beginning of June but I see it is not showing up in the discussion so you may not have seen it?
I had enabled the add-on once again and cleared the cache so you could see the issue in action but I have had to disable it once again as I was seeing the same issue in other mobile devices also.
If you have time to look into the issue I can enable it once again so you can look into it. If you still require dashboard access to look at the config then let me know the email address I need to add you as a user.
Thanks for your help.
Sorry to hear that. It sucks hen it happens. I can confirm I didn't get your answer.
Yes if you could activate it so I can have a look that would be great thank you. If I'm not getting anywhere I'll ask for dashboard access later.
Yes if you could activate it so I can have a look that would be great thank you. If I'm not getting anywhere I'll ask for dashboard access later.
Thanks for getting back to me so quickly - I will be sure to use the forum for replies in future!
I have re-enabled the add-on so you can view the issue athttp://fullersfamilylaw.com/
I can see the issue using the browser stack "real devices" facility for the Google Pixel and the Samsung Galaxy in Android as well as on our physical iOS devices.
Thanks
Paul
I have re-enabled the add-on so you can view the issue athttp://fullersfamilylaw.com/
I can see the issue using the browser stack "real devices" facility for the Google Pixel and the Samsung Galaxy in Android as well as on our physical iOS devices.
Thanks
Paul
I just tested again I think it's not due to my package. It's due to the breakpoints set in your theme. If you look at the image you will see it uses a picture tag with breakpoints set at min 800px min 1000px and min 1200px. So as soon as the screen is smaller than 800px the image disappears. Just go to your website using your normal browser and then resize it you'll see the image disappear.
Your theme should define also an image size for screens smaller than 800px.
For instance here's how the core Elemental theme does it
the last line defines the image size "small" to be used from 0 to 768px. I think you're missing that line or it references a thumbnail size that doesn't exist.
Do you know how to check all that or do you want m to have a look for you?
Your theme should define also an image size for screens smaller than 800px.
For instance here's how the core Elemental theme does it
public function getThemeResponsiveImageMap() { return [ 'large' => '900px', 'medium' => '768px', 'small' => '0', ]; }
the last line defines the image size "small" to be used from 0 to 768px. I think you're missing that line or it references a thumbnail size that doesn't exist.
Do you know how to check all that or do you want m to have a look for you?
Thanks for getting back to me so quickly.
I checked the page_theme.php in my theme and it does include...
I notice this differs slightly from your code but it does still return the $map array of sizes - should I try to change it to match your code snippet?
The thumbnail size 'small' is a defined thumbnail size in the Files settings so it is definitely odd. Also, the images are appearing as expected when I disable the add-on.
Thanks for your help.
I checked the page_theme.php in my theme and it does include...
public function getThemeResponsiveImageMap() { $map = array( 'large' => '1000px', 'medium' => '800px', 'small' => '0', ); return $map; }
I notice this differs slightly from your code but it does still return the $map array of sizes - should I try to change it to match your code snippet?
The thumbnail size 'small' is a defined thumbnail size in the Files settings so it is definitely odd. Also, the images are appearing as expected when I disable the add-on.
Thanks for your help.
That's just bizarre. Why would it disappear when resizing in the desktop browser???
OK I'm going to keep looking. Please keep it enabled for now.
OK I'm going to keep looking. Please keep it enabled for now.
Thanks for looking into it.
Interestingly, I was seeing the image loading as expected in desktop Safari using the Responsive Design Mode to resize. I tried the same in Chrome using the Device toolbar to simulate smaller screen sizes and the image disappears!
The only difference between the two instances - I was logged in to C5 in Safari and not in Chrome. I signed out in Safari and the image then disappears in Responsive Design Mode at the 800px breakpoint you identified.
Bizarre
Interestingly, I was seeing the image loading as expected in desktop Safari using the Responsive Design Mode to resize. I tried the same in Chrome using the Device toolbar to simulate smaller screen sizes and the image disappears!
The only difference between the two instances - I was logged in to C5 in Safari and not in Chrome. I signed out in Safari and the image then disappears in Responsive Design Mode at the 800px breakpoint you identified.
Bizarre
OK I think I have it figure it out this time.
Your picture element looks like this
If you look at the "source" elements you will see the values in their data-srcset was correctly copied to srcset by my script.
But if you look at the "img" you will see that data-src was not copied correctly to src which still retains the svg placeholder.
ANother thing you will notice is the img data-src contains 2 image URLs just like the source elements do. That's not correct, an image doesn't work like a source element, it's can't contain a list of URLs.
I think that's what's throwing off my script.
So if I'm correct, you either have modification somewhere to add the retina images and that modification is creating this issue. Or there's a bug in C5.
Are you aware of any modification on your site to the way those picture tags are generated?
Your picture element looks like this
<picture data-lazied="IMG" class="defer-lazied defer-loaded"> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(min-width: 1200px)" data-srcset="/application/files/thumbnails/full/2215/8513/4602/here-to-help.jpg, /application/files/2215/8513/4602/here-to-help.jpg 2x" class="defer-lazied defer-loaded" srcset="/application/files/thumbnails/full/2215/8513/4602/here-to-help.jpg, /application/files/2215/8513/4602/here-to-help.jpg 2x"> <source media="(min-width: 1000px)" data-srcset="/application/files/thumbnails/large/2215/8513/4602/here-to-help.jpg, /application/files/thumbnails/large_2x/2215/8513/4602/here-to-help.jpg 2x" class="defer-lazied defer-loaded" srcset="/application/files/thumbnails/large/2215/8513/4602/here-to-help.jpg, /application/files/thumbnails/large_2x/2215/8513/4602/here-to-help.jpg 2x"> <source media="(min-width: 800px)" data-srcset="/application/files/thumbnails/medium/2215/8513/4602/here-to-help.jpg, /application/files/thumbnails/medium_2x/2215/8513/4602/here-to-help.jpg 2x" class="defer-lazied defer-loaded" srcset="/application/files/thumbnails/medium/2215/8513/4602/here-to-help.jpg, /application/files/thumbnails/medium_2x/2215/8513/4602/here-to-help.jpg 2x"> <!--[if IE 9]></video><![endif]--> <img alt="Here to Help" class="img-responsive" data-srcset="/application/files/thumbnails/small/2215/8513/4602/here-to-help.jpg, /application/files/thumbnails/small_2x/2215/8513/4602/here-to-help.jpg 2x" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E"> </picture>
If you look at the "source" elements you will see the values in their data-srcset was correctly copied to srcset by my script.
But if you look at the "img" you will see that data-src was not copied correctly to src which still retains the svg placeholder.
ANother thing you will notice is the img data-src contains 2 image URLs just like the source elements do. That's not correct, an image doesn't work like a source element, it's can't contain a list of URLs.
I think that's what's throwing off my script.
So if I'm correct, you either have modification somewhere to add the retina images and that modification is creating this issue. Or there's a bug in C5.
Are you aware of any modification on your site to the way those picture tags are generated?
Ahaa - that would explain it.
Whilst the default image blocks are not affected we have created some custom templates for certain situations based on the picturefill guidelines of using srcset on the img tag.
I have just updated these custom templates to just use src and a single image source and the images magically appear again on smaller screen sizes!
Still odd that it was working when logged in but broken otherwise but thanks for taking the time to look into a resolution. I will run through the site to make sure I have updated all necessary instances.
Thanks
Paul
Whilst the default image blocks are not affected we have created some custom templates for certain situations based on the picturefill guidelines of using srcset on the img tag.
I have just updated these custom templates to just use src and a single image source and the images magically appear again on smaller screen sizes!
Still odd that it was working when logged in but broken otherwise but thanks for taking the time to look into a resolution. I will run through the site to make sure I have updated all necessary instances.
Thanks
Paul
Man, I love it when I can proudly stand by my work and say "my stuff does work!!!" ;-)
Glad we got it figured out.
If you like the add-on, may I ask you to take the time to leave a review, please? Reviews from users like you mean a lot to prospective users who heavily rely on them. Many thanks in advance.
Glad we got it figured out.
If you like the add-on, may I ask you to take the time to leave a review, please? Reviews from users like you mean a lot to prospective users who heavily rely on them. Many thanks in advance.
Thanks for all your help - and your great add-on. I'm so glad we managed to get to the bottom of the issue.
I will mark the best answer to help any future issues (probably me!) and I will be sure to leave a review too.
Thanks
Paul
I will mark the best answer to help any future issues (probably me!) and I will be sure to leave a review too.
Thanks
Paul
Thank you so much, I really appreciate it.