CODEWITHSUNDEEP
androidcsshtmlgoogle-chromeresponsive-design
Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

Picture tag uses wrong source on Chrome on Android

I am using the html5 picture tag to load the appropriate image:

<picture>
    <source srcset="/path/to/image-450x450.jpg" media="(min-width:768px)">
    <source srcset="/path/to/image-600x600.jpg" media="(min-width:600px)">
    <source srcset="/path/to/image-450x450.jpg" media="(min-width:450px)">
    <img src="/path/to/image-224x224.jpg" alt="Alt text here">
</picture>

On my pc this loads up the first source image. On my tablet it is loading the second source image THEN the first source image.

I have plugged my tablet into my pc in developer mode so that I can inspect the elements and view the network tab from my pc.

That is how I learned that the tablet was loading the large images first, THEN the correct image.

I have read that browsers will apply the source of the first matching media attribute.

Frustratingly, I have picture elements on other pages and they are loading the images correctly, so why is this one doing it differently? How do I fix it?

I have changed the media query to different values but the browser seems to ignore it on first pass.

I have disabled javascript in case a plugin was to blame.

I thought maybe the browser was pre-fetching the 2nd image because the screen height was under 600px so I did an alert of $(window).width() and it is 800px so that isn't the answer either.

I am using Chrome 45.0.2454.94 on a Galaxy Tab 2 running android 4.2.2.

I can only assume other browsers/devices are having similar issues but I lack the ability to test on those devices. I am hoping if I fix the issue on this browser/device then it "should" be fixed on the other browsers/devices as well...

How do I get chrome on android to load the correct picture element?

[edit]

I have also implemented PictureFill to see if that helped. It did not.

Upvotes: 3

Views: 995

Answers (1)

Yoav Weiss
Yoav Weiss

Reputation: 2270

I believe you have bumped into a browser bug (sorry about that :/). It should be fixed in Chrome 46, currently in the beta channel.

Can you please test with Chrome Beta and verify that it in fact fixes that issue for you?

Upvotes: 3

Related Questions