Page 1 of 1

HTML5 picture element not visible in (some?) Android browsers?

Posted: Mon Mar 23, 2020 1:17 am
by Cantenac
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.

Re: HTML5 picture element not visible in (some?) Android browsers?

Posted: Mon Mar 23, 2020 7:24 am
by Pablo
Maybe the filename of the image is invalid?

Related FAQ:
viewtopic.php?f=10&t=131

Re: HTML5 picture element not visible in (some?) Android browsers?

Posted: Mon Mar 23, 2020 1:13 pm
by Cantenac
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?

Posted: Tue Mar 24, 2020 7:12 am
by Pablo
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?

Re: HTML5 picture element not visible in (some?) Android browsers?

Posted: Tue Mar 24, 2020 6:26 pm
by Cantenac
Thanks, I've just emailed a demo.

Re: HTML5 picture element not visible in (some?) Android browsers?

Posted: Tue Mar 24, 2020 7:02 pm
by Pablo
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