<img intrinsicsize> fights jank

img-intrinsicsize-fights-jank.markdown

fights jank

A Pen by Eric Portis on CodePen.

License.

index.html

<header>
  <h1><a href="https://www.chromestatus.com/feature/4704436815396864" target="_blank"><code>intrinsicsize</code></a> fights jank</h1>
  <p>Here are two videos, showing what loading this page looks like:</p>
  <ul>
    <li><a href="https://eric-cloudinary-res.cloudinary.com/video/upload/v1546972148/jank_2.mp4" target="_blank">in browsers, now, by default</a>
      <ul><li>DevTools says: <a href="https://eric-cloudinary-res.cloudinary.com/image/upload/v1546974288/12_layout_events.png"  target="_blank">12 layout events spread over 5 seconds</a> = janky</li></ul>
    </li>
    <li><a href="https://eric-cloudinary-res.cloudinary.com/video/upload/v1546972153/no_jank_2.mp4" target="_blank">in Chrome 71+ with Experimental Web Platform Features set to “Enabled”</a>
      <ul><li>DevTools says: <a href="https://eric-cloudinary-res.cloudinary.com/image/upload/v1546974288/1_layout_event.png" target="_blank">only one, initial, layout</a> = no jank!</li></ul>
    </li>

  </ul>
</header>
<main>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/w_320,q_auto/wocInTech/0016.jpg" intrinsicsize="320x213" />
    <figcaption>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/w_320,q_auto/wocInTech/0005.jpg" intrinsicsize="320x480" />
    <figcaption>totam rem aperiam, </figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/h_1.0,ar_1,g_auto,c_crop/w_320,q_auto/wocInTech/0006.jpg" intrinsicsize="320x320" />
    <figcaption>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, </figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/h_1.0,ar_1,g_auto,c_crop/w_320,q_auto/wocInTech/0027.jpg" intrinsicsize="320x320" />
    <figcaption>olores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, </figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/w_320,q_auto/wocInTech/0020.jpg" intrinsicsize="320x213" />
    <figcaption>adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/w_320,q_auto/wocInTech/0009.jpg" intrinsicsize="320x480" />
    <figcaption>sed quia consequuntur magni dolores</figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/h_1.0,ar_1,c_crop,g_auto/w_320,q_auto/wocInTech/0013.jpg" intrinsicsize="320x320" />
    <figcaption>eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/w_320,q_auto/wocInTech/0011.jpg" intrinsicsize="320x480" />
    <figcaption>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/w_320,q_auto/wocInTech/0022.jpg" intrinsicsize="320x213" />
    <figcaption>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,</figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/w_320,q_auto/wocInTech/0033.jpg" intrinsicsize="320x213" />
    <figcaption>vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</figcaption>
  </figure>
  <figure>
    <img src="https://eric-cloudinary-res.cloudinary.com/image/upload/w_320,q_auto/wocInTech/0034.jpg" intrinsicsize="320x480" />
    <figcaption>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</figcaption>
  </figure>

</main>
<footer>
  Images copyright <a href="wocintechchat.com" target="_blank">#WOCinTechChat</a>, used under a Create Commons (Attribution) license.
</footer>

style.css

:root {
  font-family: system-ui, sans-serif;
  background: #eee;
}

main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-flow: dense;
}

figure {
  padding: 1em;
  margin: 1em;
  background: white;
  border-radius: 0.3675em;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

img {
  background: gray;
  width: 100%;
}

a {
  color: steelblue;
}

code {
  font-family: Menlo, Consolas, monospace;
}

footer {
  font-size: 0.8675em;
  color: gray;
  text-align: center;
  margin: 2em;
}