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

Issues related to previewing and publishing your web site.
Post Reply
Cantenac
Posts: 40
Joined: Thu Jan 09, 2020 3:36 pm

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

Post 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.
User avatar
Pablo
Site Admin
Posts: 3375
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

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

Post by Pablo »

Maybe the filename of the image is invalid?

Related FAQ:
viewtopic.php?f=10&t=131
Cantenac
Posts: 40
Joined: Thu Jan 09, 2020 3:36 pm

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

Post by Cantenac »

Just run a test to check, with a singe image named test.jpg at all breakpoints, and doesn't display that either.
User avatar
Pablo
Site Admin
Posts: 3375
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

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

Post 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?
Cantenac
Posts: 40
Joined: Thu Jan 09, 2020 3:36 pm

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

Post by Cantenac »

Thanks, I've just emailed a demo.
User avatar
Pablo
Site Admin
Posts: 3375
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

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

Post 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
Post Reply