A Pen by Eric Portis on CodePen.
Created
December 25, 2023 21:23
-
-
Save seangeleno/d8c88772520412249584dd03ab0a2a87 to your computer and use it in GitHub Desktop.
<img intrinsicsize> fights jank
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
: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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment