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 - 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...

2 Attachments

Type: Pre-Sale
Status: Resolved
View Replies:
phowie74 replied on at Permalink Reply
Sorry, i mis-typed the url which is secured -
mnakalay replied on at Permalink Reply

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
phowie74 replied on at Permalink Reply

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.
mnakalay replied on at Permalink Reply
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.
phowie74 replied on at Permalink Reply
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 at

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.

mnakalay replied on at Permalink Reply
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
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?
phowie74 replied on at Permalink Reply
Thanks for getting back to me so quickly.

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.
mnakalay replied on at Permalink Reply
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.
phowie74 replied on at Permalink Reply
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.

mnakalay replied on at Permalink Reply
OK I think I have it figure it out this time.

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=''%20viewBox='0%200%201%201'%3E%3C/svg%3E">

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?
phowie74 replied on at Permalink Reply
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.

mnakalay replied on at Permalink Reply
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.
phowie74 replied on at Permalink Reply
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.

mnakalay replied on at Permalink Reply
Thank you so much, I really appreciate it.

concrete5 Environment Information

# concrete5 Version
Core Version - 8.4.3
Version Installed - 8.4.3
Database Version - 20180716000000

# concrete5 Packages
ExchangeCore reCAPTCHA (1.1.1), Instant Page Speed Magic (1.0.8), List files from set (1.0.12), Multiple Editor Snippets (0.9), Open Graph Tags Lite (2.1.3), Page Redirect (2.0), Page Selector Attribute (2.0), SVG Image (0.9.7)

# concrete5 Overrides
blocks/page_title/templates/seo-title/view.php, blocks/page_title/templates/seo-title, blocks/page_title/templates/blog_list/view.php, blocks/page_title/templates/blog_list, blocks/page_title/templates/seo-header/view.php, blocks/page_title/templates/seo-header, blocks/page_title/templates, blocks/page_title/view.php, blocks/page_title, blocks/svg_image/templates/header/view.php, blocks/svg_image/templates/header, blocks/svg_image/templates, blocks/svg_image, blocks/form/templates/contact/view.php, blocks/form/templates/contact, blocks/form/templates/callback/view.php, blocks/form/templates/callback, blocks/form/templates, blocks/form, blocks/search/templates/blog/view.php, blocks/search/templates/blog, blocks/search/templates/search-results/view.php, blocks/search/templates/search-results, blocks/search/templates/header/view.php, blocks/search/templates/header, blocks/search/templates/results/view.php, blocks/search/templates/results, blocks/search/templates, blocks/search, blocks/image/templates/intro_header/view.php, blocks/image/templates/intro_header, blocks/image/templates, blocks/image/view.php, blocks/image, blocks/content/composer/vacancy_contact.php, blocks/content/composer/blog.php, blocks/content/composer/biography.php, blocks/content/composer/vacancy.php, blocks/content/composer, blocks/content/templates/office_hours/view.php, blocks/content/templates/office_hours, blocks/content/templates/gallery_grid/view.php, blocks/content/templates/gallery_grid, blocks/content/templates/gallery_grid_highlight/view.php, blocks/content/templates/gallery_grid_highlight, blocks/content/templates, blocks/content, blocks/social_links/templates/blog_list/view.php, blocks/social_links/templates/blog_list, blocks/social_links/templates/footer/view.php, blocks/social_links/templates/footer, blocks/social_links/templates, blocks/social_links, blocks/faq/templates/list/view.php, blocks/faq/templates/list, blocks/faq/templates/list_centered/view.php, blocks/faq/templates/list_centered, blocks/faq/templates, blocks/faq, blocks/page_list/templates/vacancies/view.php, blocks/page_list/templates/vacancies, blocks/page_list/templates/blog/view.php, blocks/page_list/templates/blog, blocks/page_list/templates/testimonials/view.php, blocks/page_list/templates/testimonials, blocks/page_list/templates/offices/view.php, blocks/page_list/templates/offices, blocks/page_list/templates/testimonials-home/view.php, blocks/page_list/templates/testimonials-home, blocks/page_list/templates/services-grid/view.php, blocks/page_list/templates/services-grid, blocks/page_list/templates/team/view.php, blocks/page_list/templates/team, blocks/page_list/templates/footer/view.php, blocks/page_list/templates/footer, blocks/page_list/templates/services/view.php, blocks/page_list/templates/services, blocks/page_list/templates, blocks/page_list, blocks/share_this_page/templates/blog_footer/view.php, blocks/share_this_page/templates/blog_footer, blocks/share_this_page/templates, blocks/share_this_page, blocks/autonav/templates/main-menu/view.php, blocks/autonav/templates/main-menu, blocks/autonav/templates/blog_archive/view.php, blocks/autonav/templates/blog_archive, blocks/autonav/templates, blocks/autonav, blocks/date_navigation/templates/blog/view.php, blocks/date_navigation/templates/blog, blocks/date_navigation/templates, blocks/date_navigation, blocks/list_files_from_set/templates/home/view.php, blocks/list_files_from_set/templates/home, blocks/list_files_from_set/templates, blocks/list_files_from_set, blocks/tags/templates/blog_list/view.php, blocks/tags/templates/blog_list, blocks/tags/templates/blog_footer/view.php, blocks/tags/templates/blog_footer, blocks/tags/templates, blocks/tags, blocks/page_attribute_display/templates/blog_list/view.php, blocks/page_attribute_display/templates/blog_list, blocks/page_attribute_display/templates/description/view.php, blocks/page_attribute_display/templates/description, blocks/page_attribute_display/templates, blocks/page_attribute_display, themes/fullers/, themes/fullers/img/menu-brace@2x.png, themes/fullers/img, themes/fullers/elements/footer.php, themes/fullers/elements/header.php, themes/fullers/elements/head.php, themes/fullers/elements, themes/fullers/main.css, themes/fullers/default.php, themes/fullers/js/scripts-min.js, themes/fullers/js, themes/fullers/page_forbidden.php, themes/fullers/main.scss, themes/fullers/page_theme.php, themes/fullers/thumbnail.png, themes/fullers/view.php, themes/fullers/fonts/montserrat-v14-latin-300.woff2, themes/fullers/fonts/eb-garamond-v13-latin-italic.woff, themes/fullers/fonts/eb-garamond-v13-latin-italic.woff2, themes/fullers/fonts/eb-garamond-v13-latin-regular.woff2, themes/fullers/fonts/montserrat-v14-latin-300.woff, themes/fullers/fonts/montserrat-v14-latin-300italic.woff2, themes/fullers/fonts/montserrat-v14-latin-300italic.woff, themes/fullers/fonts/eb-garamond-v13-latin-regular.woff, themes/fullers/fonts, themes/fullers/page_not_found.php, themes/fullers, src/Concrete/BlogPublish/Handler.php, src/Concrete/BlogPublish, src/Concrete

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - On - If blocks on the particular page allow it.
Full Page Cache Lifetime - Only when manually removed or the cache is cleared.

# Server Software

# Server API

# PHP Version

# PHP Extensions
apache2handler, bz2, calendar, Core, ctype, curl, date, dom, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imagick, json, libxml, mbstring, mcrypt, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, session, shmop, SimpleXML, sockets, SPL, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tokenizer, wddx, xml, xmlreader, xmlwriter, xsl, zip, zlib

# PHP Settings
max_execution_time - 60
log_errors_max_len - 2048
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 20
max_input_vars - 1000
memory_limit - 128M
post_max_size - 34M
sql.safe_mode - Off
upload_max_filesize - 32M
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 3456000

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.