I only have a sample of 1 Android phone (Android 6.0), but am finding that images configured using the HTML5 Picture element are not displayed.
Samsung Internet v11.1.2.2 (the latest version), and MS Edge (also latest version) fail to display the image; the default browser displays a broken image symbol. No problem at the same break-point on the desktop.
I'm working around it by serving a traditional image at the lowest break-points, and imagine that it may be OS-related, but reported here in case anyone knows otherwise.
HTML5 picture element not visible in (some?) Android browsers?
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.quickandeasywebbuilder.com/f ... =12&t=1901
MUST READ:
http://www.quickandeasywebbuilder.com/publish.html
http://www.quickandeasywebbuilder.com/preview.html
Frequently Asked Questions about Publishing
PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.quickandeasywebbuilder.com/f ... =12&t=1901
MUST READ:
http://www.quickandeasywebbuilder.com/publish.html
http://www.quickandeasywebbuilder.com/preview.html
Frequently Asked Questions about Publishing
Re: HTML5 picture element not visible in (some?) Android browsers?
Just run a test to check, with a singe image named test.jpg at all breakpoints, and doesn't display that either.
Re: HTML5 picture element not visible in (some?) Android browsers?
To be able to help you, I need to see what you have done.
What is the URL and where exactly do I need to look to see the problem?
What is the URL and where exactly do I need to look to see the problem?
Re: HTML5 picture element not visible in (some?) Android browsers?
Thanks, I've just emailed a demo.
Re: HTML5 picture element not visible in (some?) Android browsers?
The picture element is a relatively new HTML element. It is not supported by all browsers.
https://caniuse.com/#feat=picture
Also, you are using flexgrid, which only works with recent browsers.
https://caniuse.com/#feat=css-grid
And, the filenames of the adaptive images are not valid.
The names should looks like this:
filename@1.5x.png
Related tutorial:
http://quickandeasywebbuilder.com/picture.html
https://caniuse.com/#feat=picture
Also, you are using flexgrid, which only works with recent browsers.
https://caniuse.com/#feat=css-grid
And, the filenames of the adaptive images are not valid.
The names should looks like this:
filename@1.5x.png
Related tutorial:
http://quickandeasywebbuilder.com/picture.html