New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Safari (8.0.3) briefly shows mobile image before serving correct image for breakpoint #438

Closed
aaronbushnell opened this Issue Feb 10, 2015 · 10 comments

Comments

Projects
None yet
5 participants
@aaronbushnell

aaronbushnell commented Feb 10, 2015

I'm running into an issue with the newest version of Safari (8.0.3). When I refresh the page the mobile image shows briefly, then the correct image loads shortly after.

glitch

It doesn't seem to be problematic in Chrome or Firefox.

Using Picturefill - v2.2.0 - 2014-10-30
HTML:

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo Site</title>
  <link rel="stylesheet" href="styles.css">
  <script>
    document.createElement( "picture" );
  </script>
  <script src="/bower_components/picturefill/dist/picturefill.js" async></script>
</head>
<body>

...

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="large.jpg" media="(min-width: 1200px)">
  <!--[if IE 9]></video><![endif]-->
  <img class="header-image__img" srcset="small.jpg" alt="Image">
</picture>

...
@aFarkas

This comment has been minimized.

Collaborator

aFarkas commented Feb 10, 2015

Try this markup:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="large.jpg" media="(min-width: 1200px)">
  <source srcset="small.jpg" >
  <!--[if IE 9]></video><![endif]-->
  <img class="header-image__img" alt="Image">
</picture>
@aaronbushnell

This comment has been minimized.

aaronbushnell commented Feb 10, 2015

Works perfectly! Anything I should be concerned about if I make that my default Picturefill setup?

@aFarkas

This comment has been minimized.

Collaborator

aFarkas commented Feb 10, 2015

From behavior it is what you need and this syntax is futureproof .

The only thing you should know, that in a perfect world (1-2 years), you would write it differently:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="large.jpg" media="(min-width: 1200px)">
  <!--[if IE 9]></video><![endif]-->
  <img src="small.jpg" class="header-image__img" alt="Image">
</picture>
@aaronbushnell

This comment has been minimized.

aaronbushnell commented Feb 10, 2015

Understandable. Thanks for the quick help with this!

@albell

This comment has been minimized.

Collaborator

albell commented Feb 11, 2015

So, in summary, it looks like the srcset needs to be removed from the fallback img in order to prevent a flash in current Safari. So should we change the docs to reflect this as best practice? I.E. all the actual images as <source>s with the <img> just doing duty as alt text, no src or srcset @aFarkas ?

@aFarkas aFarkas reopened this Feb 11, 2015

@aFarkas

This comment has been minimized.

Collaborator

aFarkas commented Feb 11, 2015

+1 for this and I call it the mutilated img pattern.

@albell

This comment has been minimized.

Collaborator

albell commented Feb 11, 2015

SGTM. It's totally invalid of course. But the FOWI™ (Flash of Wrong Image) is pretty unacceptable. Should we get this in sooner rather than later?

@aFarkas

This comment has been minimized.

Collaborator

aFarkas commented Feb 23, 2015

I think this should be documented. Additionally it should be also documented, that this pattern can also be used to prevent double downloads on iOS devices if normally only img[srcset][sizes] would be used.

Here is the pattern:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="large.jpg 1440w, small.jpg 960w" sizes="(max-width: 1280px) 100vw, 1280px">
  <!--[if IE 9]></video><![endif]-->
  <img alt="Pictured img without art direction">
</picture>
@albell

This comment has been minimized.

Collaborator

albell commented Feb 24, 2015

Yep, but one issue with this pattern is that it causes no image to display to display in Android 2.3. It seems like there's no one markup pattern that covers all possible support scenarios. Meh. At the same time, the docs are already a bit verbose. It would be great to reduce the recommended markup patterns to a small numbered handful that we all agree on, write unit tests to match, and then make a simple chart with checkmarks so devs can see the pros and cons of each, and choose quickly.

@Wilto

This comment has been minimized.

Collaborator

Wilto commented Jul 10, 2015

It would be great to reduce the recommended markup patterns to a small numbered handful that we all agree on, write unit tests to match, and then make a simple chart with checkmarks so devs can see the pros and cons of each, and choose quickly.

Nice. Closing in favor of #536.

@Wilto Wilto closed this Jul 10, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment