{"id":6430,"date":"2020-09-16T22:06:52","date_gmt":"2020-09-16T22:06:52","guid":{"rendered":"https:\/\/www.terluinwebdesign.nl\/fr\/?p=6430"},"modified":"2025-07-18T15:00:55","modified_gmt":"2025-07-18T15:00:55","slug":"calculating-contain-intrinsic-size-for-content-visibility","status":"publish","type":"post","link":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/","title":{"rendered":"Calculating &#8216;contain-intrinsic-size&#8217; for &#8216;content-visibility&#8217;"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all d__content-in-narrow-container t__content-in-container m__content-in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"13116.8203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"10703.7890625\" data-cache-vw-m=\"462\" data-cache-h-m=\"23547.46875\"><div class=\"col all\"><p>CSS property <strong class=\"code css-code\">content-visibility<\/strong> can be used to easily improve rendering performance, but it should be used in conjunction with <strong class=\"code css-code\">contain-intrinsic-size<\/strong> to be practical.<\/p><p>If you have looked into this before, you might know that using value <span class=\"code css-code\">auto<\/span> for property <span class=\"code css-code\">content-visibility<\/span> tells the browser to only render a row if it's inside of your viewport.<\/p><p>Basically it makes it possible to perform <em>lazy-rendering<\/em>, just like lazy-loading images.<\/p><p>Property <span class=\"code css-code\">contain-intrinsic-size<\/span> provides an <strong>estimated size<\/strong> for rows that are not yet rendered, because those would otherwise have no size while outside of your viewport.<\/p><p>While property <span class=\"code css-code\">contain-intrinsic-size<\/span> is actually a shorthand for properties <span class=\"code css-code\">contain-intrinsic-height<\/span> and <span class=\"code css-code\">contain-intrinsic-width<\/span>, you are most likely not going to bother about <span class=\"code css-code\">contain-intrinsic-width<\/span>, as most web designs do not scroll horizontally.<\/p><p><b>There is a problem, however..<\/b> How are you supposed to estimate the height of a row? It would be way too much work to manually measure the height of every row. Again and again after updating the contents of rows, too.<\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2 class=\"exclude-from-toc\">Contents<\/h2><nav><tw-shortcode-wrapper data-id=\"12\" data-esi=\"0\"><tw-automatic-table-of-contents class=\"\"><\/tw-automatic-table-of-contents><\/tw-shortcode-wrapper><\/nav><h2>Rendered size vs intrinsic size<\/h2><p>What is the difference between rendered size and intrinsic size?<\/p><p>Let's start with <strong>intrinsic size<\/strong>. The intrinsic size of an element is determined by the contents of an element, without any CSS styles that affect it's final size (<strong>rendered size<\/strong>).<\/p><p>Let's take an image as an example: it's original\/intrinsic size is 400x400 pixels.<\/p><p>Let's say, the following CSS applies to the image: <code class=\"css-code\">max-width: 100%<\/code>. If that image is shown on a smartphone which's viewport width is 360 pixels, then it's final size won't be 400x400 pixels, but 360x360 pixels at most - because of the maximum width by the CSS.<\/p><p>That very final size of 360x360 or smaller is called the <strong>rendered size<\/strong> of the image.<\/p><p>Now that you know the difference between the two, you could probably understand why CSS property <span class=\"code css-code\">contain-intrinsic-size<\/span> is called the way it is: it provides a placeholder value for elements that have no <strong>rendered size<\/strong> (due to <span class=\"code css-code\">content-visibility: auto<\/span>).<\/p><h2>Browser support for CSS properties <span class=\"nowrap\">content-visibility<\/span> and contain-intrinsic-size<\/h2><h3>Can I use content-visibility?<\/h3><p>Yes, but it's not supported by all browser versions. You can use <span class=\"code css-code\">content-visibility<\/span> in the following, earliest supporting, browser versions (as of November 18, 2021):<\/p><ul><li>Google Chrome version 85<\/li><li>Chrome for Android version 95<\/li><li>Microsoft Edge version 85<\/li><li>Android Browser version 95<\/li><li>Samsung Internet version 14.0<\/li><li>Opera version 71<\/li><li>Opera Mobile version 64<\/li><\/ul><h3>Can I use contain-intrinsic-size?<\/h3><p>Yes, but not all browsers support <span class=\"code css-code\">contain-intrinsic-size<\/span>. Logically, this CSS property is supported by the same browser versions as is the case with the CSS property that goes hand-in-hand with this property: <span class=\"code css-code\">content-visibility<\/span>.<\/p><p>You can use CSS property&nbsp;<span class=\"code css-code\">contain-intrinsic-size<\/span> in the following, earliest supporting, browser versions (as of November 18, 2021):<\/p><ul><li>Google Chrome version 83<\/li><li>Chrome for Android version 95<\/li><li>Microsoft Edge version 83<\/li><li>Android Browser version 95<\/li><li>Samsung Internet version 13.0<\/li><li>Opera version 69<\/li><li>Opera Mobile version 64<\/li><\/ul><h2>Requirements for calculating contain-intrinsic-size<\/h2><p>I can not provide a ready-to-use solution, because every website uses a different web design system and tool to manage their content. That's why I provide you a way to implement lazy-rendering into your own web design.<\/p><p>These are the requirements for implementation:<\/p><ul><li><strong><a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/viewport-relative-fluid-responsive-web-design\/\" target=\"_blank\" rel=\"noopener\">Viewport-relative web design<\/a><\/strong> or a predictable <strong>container-based web design<\/strong>. If a container-based web design also uses viewport-relative sizing and\/or sizes that vary in-between breakpoints that determine the width of containers, that will make the height of rows unpredictable. That will make it useless to cache the height of rows at certain container-widths, since then the row's height can have thousands of outcomes.<\/li><li><strong>Frontend editor<\/strong> that allows:<ul><li>Custom JavaScript to load when editing a page.<\/li><li>Saving custom values to rows before saving a page.<\/li><\/ul><\/li><\/ul><h2>Process of calculating contain-intrinsic-size<\/h2><h3>JS - Actions just before saving a page (inside editor)<\/h3><ol><li><b>Measure height of rows<\/b> at different devices (for viewport-relative web designs) or at multiple container widths (for container-based web designs).<\/li><li><b>Measure viewport width<\/b> (viewport-relative) or <strong>container width<\/strong> (container-based).<\/li><li><b>Save height of rows<\/b> at certain viewport widths (for viewport-relative web designs) or save height of row at certain container-widths (for container-based web designs). Save those values inside custom HTML data-attributes, which you will query using PHP.<\/li><\/ol><h3>PHP - Formulas for contain-intrinsic-size (outside editor)<\/h3><ol><li>Query all rows with those HTML attributes, using PHP's built-in XML\/HTML parser.<\/li><li>Insert the formulas as CSS variables (inside style attribute).<\/li><\/ol><h3>CSS - Apply lazy-rendering, using the formulas (outside editor)<\/h3><p>Query rows with the CSS variables. Apply <span class=\"code css-code\">content-visibility: auto<\/span>.<\/p><h4>If you use a viewport-relative web design<\/h4><p>Apply CSS variables to calculate <span class=\"code css-code\">contain-intrinsic-size<\/span> for current viewport-width.<\/p><h4>If you use a container-based web design<\/h4><p>Apply CSS variables to set value for <span class=\"code css-code\">contain-intrinsic-size<\/span> at current container-width.<\/p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2020\/10\/content-visibility-and-contain-intrinsic-size-visualised.png\" title=\"content-visibility: auto; (visualized)\" alt=\"css content-visibility auto visualized\" class=\"d__fl-r t__fl-r d__mar-bottom-m t__mar-bottom-m\" width=\"1458\" height=\"1458\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2020\/10\/content-visibility-and-contain-intrinsic-size-visualised-w2855.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"666.859375\" data-img-h-d=\"666.859375\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.4375\" data-img-h-t=\"502.4375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"404.25\" data-img-of-m=\"fill\"><h2 class=\"cl-r\">Homepage rendering performance with <span class=\"nowrap\">content-<wbr>visibility: auto;<\/span><\/h2><p>The following results are based on 20 tests, 5 without and 5 with lazy-rendering, for a desktop device and a mobile device&nbsp;( (5 + 5) * 2 ).<\/p><p>The desktop device is nothing crazy, but I'd say it's powerful enough to provide consistent results. The mobile device is an iPhone X, emulated in Google Chrome DevTools on that same desktop device.<\/p><div class=\"row all m__vertical\"><div class=\"col all\"><h3>Desktop - No lazy-rendering<\/h3><table id=\"averages-before\" class=\"w100\"><tbody><tr><th>Loading<\/th><td>22.8ms<\/td><\/tr><tr><th>Scripting<\/th><td>92.8ms<\/td><\/tr><tr><th>Rendering<\/th><td>173.8ms<\/td><\/tr><tr><th>Painting<\/th><td>74ms<\/td><\/tr><tr><th>System<\/th><td>57.2ms<\/td><\/tr><\/tbody><\/table><\/div><div class=\"col all\"><h3>Desktop - Lazy-rendering<\/h3><table class=\"w100\"><tbody><tr><th>Loading<\/th><td>21.4ms<\/td><td>-6.14%<\/td><\/tr><tr><th>Scripting<\/th><td>96.2ms<\/td><td>+3.66%<\/td><\/tr><tr><th>Rendering<\/th><td>105.4ms<\/td><td class=\"BG-GREEN WHITE\">-39.36%<\/td><\/tr><tr><th>Painting<\/th><td>71ms<\/td><td>-4.05%<\/td><\/tr><tr><th>System<\/th><td>53.4ms<\/td><td>-6.64%<\/td><\/tr><\/tbody><\/table><\/div><\/div><div class=\"row all m__vertical\"><div class=\"col all\"><h3>Mobile - No lazy-rendering<\/h3><table class=\"w100\"><tbody><tr><th>Loading<\/th><td>24ms<\/td><\/tr><tr><th>Scripting<\/th><td>88.8ms<\/td><\/tr><tr><th>Rendering<\/th><td>188.6ms<\/td><\/tr><tr><th>Painting<\/th><td>19.2ms<\/td><\/tr><tr><th>System<\/th><td>52.2ms<\/td><\/tr><\/tbody><\/table><\/div><div class=\"col all\"><h3>Mobile - Lazy-rendering<\/h3><table id=\"averages-after\" class=\"w100\"><tbody><tr><th>Loading<\/th><td>19ms<\/td><td>-20.83%<\/td><\/tr><tr><th>Scripting<\/th><td>92.4ms<\/td><td>+4.05%<\/td><\/tr><tr><th>Rendering<\/th><td>114.2ms<\/td><td class=\"BG-GREEN WHITE\">-39.45%<\/td><\/tr><tr><th>Painting<\/th><td>14.6ms<\/td><td>-23.96%<\/td><\/tr><tr><th>System<\/th><td>51.8ms<\/td><td>-0.77%<\/td><\/tr><\/tbody><\/table><\/div><\/div><h2>Is it worth it, doing all of this?<\/h2><p>If you are up for a challenge.. it's worth it. Is it overkill? Yes. If you're not here for the challenge, then I suggest not to waste your time for such a minor improvement.<\/p><p>If you are up for the challenge or interested in how I managed to do so, please consider reading about how I managed to automatically calculate <span class=\"code css-code\">contain-intrinsic-size<\/span> to be able to utilize <span class=\"code css-code\">content-visibility: auto;<\/span> throughout my entire website.<\/p><p>You might stumble across some issues, that I faced as well.<\/p><hr><p>If you are familiar with <a href=\"https:\/\/wordpress.org\/plugins\/litespeed-cache\/\" target=\"_blank\" rel=\"noopener noreferrer\">LiteSpeed Cache<\/a> (a caching\/performance plugin for WordPress) or any other solution to speed up your website, then you might know that it is possible to provide an image placeholder that shows whenever an image is not yet loaded.<\/p><p>It prevents the layout from shifting when an image loads it's dimensions change from 0x0 to, for instance, 500x800 in pixels. Which is annoying, by the way.<\/p><p>If you want to estimate the height of a row, you would have to measure the height at multiple screen sizes (and possibly screen heights, may your web design use units based on viewport height).<\/p><p><b>That takes way too much time and effort.<\/b><\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2>How I managed to calculate the height<\/h2><p>First, let me explain how the web design of my website works. The web design of my website adapts to 3 device categories:<\/p><ol><li>Mobile <code>@media (max-width: 575.98px) { ... }<\/code><\/li><li>Tablet <code>@media (min-width: 576px) and (max-width: 1199.98px) { ... }<\/code><\/li><li>Laptop &amp; Desktop <code>@media (min-width: 1200px) { ... }<\/code><\/li><\/ol><p>Font-sizes and spaces (paddings and margins) are all stored in CSS variables. I designed this website in <i>Adobe XD<\/i> at a certain canvas size that I've then set as CSS variables to use in formulas (<span class=\"code css-code\">--designedForWidth<\/span> and <span class=\"code css-code\">--designedForHeight<\/span>).<\/p><p>Instead of storing all the different font-sizes and spaces as plain <abbr class=\"code css-code\" title=\"Viewport width\">vw<\/abbr> values, I decided to use a size in pixels in the formulas in combination with the canvas width (viewport width) for which the size is supposed to be.<\/p><p>The advantage is that you only have to design for the three device categories, because all font-sizes will scale up and down between device categories \/ media queries. Along with multipliers at mobile screens and at tablet screens for font size and for spacing, because scaling from desktop all the way down to mobile would make everything way too small.<\/p><h3>Calculating contain-intrinsic-size for content-visibility<\/h3><p>Now, as the sizes scale linearly, I decided to make sure that the page builder, that I've built for my website, saves the width of the viewport and the height of every single row by adding those values as HTML attributes (attributes for the viewport's width and attributes for the row's height). It does this for all three devices: desktop, tablet, and mobile.<\/p><p>This results in six attributes:<\/p><ol><li><code>data-cache-vw-d<\/code> (viewport's width on desktop)<\/li><li><code>data-cache-h-d<\/code> (height of row on desktop)<\/li><li><code>data-cache-vw-t<\/code> (viewport's width on tablet)<\/li><li><code>data-cache-h-t<\/code> (height of row on tablet)<\/li><li><code>data-cache-vw-m<\/code> (viewport's width on mobile)<\/li><li><code>data-cache-h-m<\/code> (height of row on mobile)<\/li><\/ol><p>Using <a href=\"https:\/\/www.php.net\/manual\/en\/class.domdocument.php\" target=\"_blank\" rel=\"noopener noreferrer\">PHP's built-in HTML parser<\/a> I was able to seek for the rows and add CSS variables as an inline style to be used to calculate <span class=\"code css-code\">contain-intrinsic-size<\/span> to be used in combination with <span class=\"code css-code\">content-visibility: auto<\/span>:<br><\/p><tw-pre><code class=\"php-code\">$doc = new DOMDocument();\r\n$doc -&gt; loadHTML($buffer); \r\n<mark>\/* Variable $buffer is collected by calling ob_get_clean() after\r\n * collecting HTML by calling ob_start() prior to echoing any HTML *\/<\/mark>\r\n\r\n$xPath = new DOMXPath($doc);\r\n\r\nif(!$twBuilderActive) {\r\n  $rowsWithCachedHeightForDesktop = $xPath -&gt; query('\/\/*[@data-cache-h-d]');\r\n  foreach($rowsWithCachedHeightForDesktop as $row) {\r\n    if($row -&gt; hasAttribute('data-cache-vw-d')) {\r\n      if($row -&gt; hasAttribute('style')) {\r\n        $style = $row -&gt; getAttribute('style');\r\n      } else {\r\n        $style = '';\r\n      }\r\n      \t\t\r\n      $row -&gt; setAttribute('style', '--cisD:100vw\/' . $row -&gt; getAttribute('data-cache-vw-d') . '*' . $row -&gt; getAttribute('data-cache-h-d') . ';' . $style);\r\n      \r\n      $row -&gt; removeAttribute('data-cache-vw-d');\r\n      $row -&gt; removeAttribute('data-cache-h-d');\r\n    }\r\n  }\r\n  \r\n  \/\/ and versions for tablet and mobile\r\n}\r\n$html = '&lt;!DOCTYPE html&gt;' . $doc -&gt; saveHTML($doc -&gt; documentElement);\r\n$html = preg_replace('\/&lt;\/wbr&gt;\/is', '', $html);\r\n$html = preg_replace('\/&lt;\/source&gt;\/is', '', $html);\r\necho $html;<\/code><\/tw-pre><p>Resulting in the following inline CSS styles for every row found through PHP:<\/p><tw-pre><code class=\"INLINE-CSS-CODE\">  --cisM: 100vw \/ 547.59375 * 4760;\r\n  --cisT: 100vw \/ 730.125 * 1154.59375;\r\n  --cisD: 100vw \/ 1920 * 1720.4271240234375;<\/code><\/tw-pre><p>What the formulas do is they scale the cached height of the row by dividing the current viewport width by the viewport width at the time of saving the page (with my page builder) and multiplying that by the height of the row at the time of saving the page.<\/p><p>In order to apply lazy-rendering properly, I decided it's best to only apply <code>content-visibility: auto<\/code> to the rows that have <span class=\"code css-code\">contain-intrinsic-size<\/span> specified. The CSS is placed inline in the top of <code>&lt;head&gt;<\/code>, because it is critical CSS.<\/p><tw-pre><code class=\"css-code\">  @media (max-width: 575.98px) {\r\n    body:not(.tw-builder) #wrapper:not(.disable-lazy-render) main#content .tw-builder-content &gt; .row[style*='--cisM:']:not(.rendered),\r\n    body:not(.tw-builder) #wrapper:not(.disable-lazy-render) footer#tw-footer .tw-builder-content &gt; .row[style*='--cisM']:not(.rendered) {\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: auto calc(var(--cisM));\r\n    }\r\n  }\r\n\r\n  @media (min-width: 576px) and (max-width: 1199.98px) {\r\n    body:not(.tw-builder) #wrapper:not(.disable-lazy-render) main#content .tw-builder-content &gt; .row[style*='--cisT:']:not(.rendered),\r\n    body:not(.tw-builder) #wrapper:not(.disable-lazy-render) footer#tw-footer .tw-builder-content &gt; .row[style*='--cisT']:not(.rendered) {\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: auto calc(var(--cisT));\r\n    }\r\n  }\r\n\r\n  @media (min-width: 1200px) {\r\n    body:not(.tw-builder) #wrapper:not(.disable-lazy-render) main#content .tw-builder-content &gt; .row[style*='--cisD:']:not(.rendered),\r\n    body:not(.tw-builder) #wrapper:not(.disable-lazy-render) footer#tw-footer .tw-builder-content &gt; .row[style*='--cisD']:not(.rendered) {\r\n      content-visibility: auto;\r\n      contain-intrinsic-size: auto calc(var(--cisD));\r\n    }\r\n  }\r\n<\/code><\/tw-pre><p>Using <span class=\"code css-code\">content-visibility: auto;<\/span> while jumping to anchors or by specific amounts does not work properly, so I will apply the class <i>disable-lazy-render<\/i> to the body whenever the user wants to jump to a particular anchor, or when they use keyboard shortcuts like <kbd>Page up<\/kbd>, <kbd>Page down<\/kbd>, <kbd>Home<\/kbd>, and <kbd>End<\/kbd>. Here is how I did that:<\/p><tw-pre><code class=\"js-code\">function twParsedUrl(url) {\r\n  var parser = document.createElement(\"a\");\r\n  parser.href = url;\r\n  parser.href = parser.href;\r\n  if (parser.host === \"\") {\r\n    var newProtocolAndHost = window.location.protocol + \"\/\/\" + window.location.host;\r\n    if (url.charAt(1) === \"\/\") {\r\n      parser.href = newProtocolAndHost + url;\r\n    } else {\r\n      var currentFolder = (\"\/\" + parser.pathname).match(\/.*\/\/)[0];\r\n      parser.href = newProtocolAndHost + currentFolder + url;\r\n    }\r\n  }\r\n  var properties = ['host', 'hostname', 'hash', 'href', 'port', 'protocol', 'search'];\r\n  for (var i = 0, n = properties.length; i &lt; n; i++) {\r\n    this[properties[i]] = parser[properties[i]];\r\n  }\r\n  this.pathname = (parser.pathname.charAt(0) !== \"\/\" ? \"\/\" : \"\") + parser.pathname;\r\n}\r\n\r\nwindow.addEventListener('DOMContentLoaded', function() {\r\n  var wrapper = document.getElementById('wrapper');\r\n  var keysThatDoJumps = ['Home', 'End', 'PageDown', 'PageUp'];\r\n  function twDisableLazyRenderForJumpingButtons(e) {\r\n    if(keysThatDoJumps.includes(e.key)) {\r\n      wrapper.classList.add('disable-lazy-render');\r\n    }\r\n  }\r\n  window.addEventListener('keydown', twDisableLazyRenderForJumpingButtons);\r\n  \r\n  var anchorLinks = [];\r\n  function twJumpToAnchorOnClick() {\r\n    var allPossibleAnchorLinks = document.querySelectorAll('a[href*='#']');\r\n    var amountOfPossibleAnchorLinks = allPossibleAnchorLinks.length;\r\n    var possibleAnchorLink, possibleAnchorLinkHref, possibleAnchorLinkURL;\r\n    for(var iPossibleAnchorLink = 1; iPossibleAnchorLink &lt;= amountOfPossibleAnchorLinks; iPossibleAnchorLink++) {\r\n      possibleAnchorLink = allPossibleAnchorLinks.item(iPossibleAnchorLink - 1);\r\n      \r\n      if (\r\n        !possibleAnchorLink.parentElement.parentElement.classList.contains('wc-tabs')\r\n      ) {\r\n        possibleAnchorLinkHref = possibleAnchorLink.href;\r\n        possibleAnchorLinkURL = new twParsedUrl(possibleAnchorLinkHref);\r\n  \r\n        if (\r\n          possibleAnchorLinkURL.hash\r\n          &amp;&amp;\r\n          possibleAnchorLinkURL.host == document.location.host\r\n          &amp;&amp;\r\n          possibleAnchorLinkURL.pathname == document.location.pathname\r\n        ) {\r\n          anchorLinks[possibleAnchorLinkHref] = possibleAnchorLinkURL;\r\n          possibleAnchorLink.addEventListener('click', function(e) {\r\n            var anchorLinkURL;\r\n            var anchorLinkHref = this.href;\r\n            if(anchorLinkURL = anchorLinks[anchorLinkHref]) {\r\n              wrapper.classList.add('disable-lazy-render');\r\n            }\r\n          });\r\n        }\r\n      }\r\n    }\r\n  }\r\n  twJumpToAnchorOnClick();\r\n}<\/code><\/tw-pre><p>Note: <i>wrapper<\/i>&nbsp;is used in the CSS mentioned previously. You might want to use a different ID or class name both in CSS and JavaScript, to make it work for your web design.<\/p><h3>Accuracy of estimation<\/h3><p>The estimations are accurate enough so that users will not notice the height of the scrollbar-thumb increasing and decreasing sometimes as different rows get rendered (thus taking up space according to the rendered height).<\/p><p>Just try it out for yourself by scrolling through <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\" hreflang=\"nl\">my homepage<\/a>.<\/p><p>If you pay very close attention then you might notice, but it's not spectacular.<\/p><h2>Good to know<\/h2><p>Things that are good to know before implementing <span class=\"code css-code\">content-visibility: auto;<\/span> into your web designs.<\/p><h3><em class=\"nowrap\">content-visibility: auto;<\/em> behaves like <em class=\"nowrap\">overflow: hidden;<\/em><\/h3><p>On this website I tend to make images bleed out of a certain width. I noticed that images that tried to reach beyond the boundaries, were cut off.<\/p><p><strong>I managed to fix that<\/strong> by making the rows full-width and shaping the content-width by applying <code>padding-left<\/code> and <code>padding-right<\/code> instead of the default <code>margin-left: auto;<\/code>, <code>margin-right: auto;<\/code> and a declared width.<\/p><tw-pre><code class=\"css-code\">&nbsp;&nbsp;body &gt; .row <span class=\"CSS-DELIMITER\">{<\/span>\r\n    <span class=\"CSS-PROPERTY\">padding-left<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">calc((100% - var(--contentWidth)) \/ 2)<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY\">padding-right<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">calc((100% - var(--contentWidth)) \/ 2)<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n  <span class=\"CSS-DELIMITER\">}<\/span>\r\n<\/code><\/tw-pre><p>The padding basically allows elements to overflow the content-box and enter the padding-box without leaving the box model as a whole and getting cut off.<\/p><h3>Rendered heights reset after scrolling out of range<\/h3><p>After rendering a row that holds <span class=\"code css-code\">content-visibility: auto;<\/span>, the rendered height will reset after scrolling out of range. That means that it will fall back to the height you've provided for <span class=\"code css-code\">contain-intrinsic-size<\/span>. This can be solved by disabling lazy rendering for the rows that already entered the viewport, including the threshold of 50% of the viewport height. Here is how I managed to do so:<\/p><tw-pre><code class=\"js-code\">var windowInnerHeight = window.innerHeight;\r\n\r\nfunction twInViewport(elem, threshold, elementBoundingClientRect) {\r\n  if(typeof threshold === 'undefined') {\r\n    var threshold = 0;\r\n  }\r\n  \r\n  if(typeof elementBoundingClientRect === 'undefined') {\r\n    var elementBoundingClientRect = elem.getBoundingClientRect();\r\n  }\r\n  \r\n  var topY = elementBoundingClientRect.top;\r\n  var bottomY = topY + elementBoundingClientRect.height; \r\n  \r\n  if (\r\n    topY &lt;= windowInnerHeight\r\n    &amp;&amp;\r\n    bottomY &gt;= 0\r\n  ) {\r\n    var inViewport = true;\r\n  } else {\r\n    var inViewport = false;\r\n  }\r\n  \r\n  if (\r\n    topY &lt;= windowInnerHeight + threshold\r\n    &amp;&amp;\r\n    bottomY &gt;= 0 - threshold\r\n  ) {\r\n    var inViewportIfThreshold = true;\r\n  } else {\r\n    var inViewportIfThreshold = false;\r\n  }\r\n  \r\n  return [\r\n    inViewport,\r\n    inViewportIfThreshold\r\n  ];\r\n}\r\n\r\nfunction twGetDeviceThroughMatchMedia() {\r\n  if(window.matchMedia('(max-width: 575.98px)').matches) {\r\n    return 'mobile';\r\n  } else if (window.matchMedia('(min-width: 576px) and (max-width: 1199.98px)').matches) {\r\n    return 'tablet';\r\n  }\r\n  \r\n  return 'desktop';\r\n}\r\nvar device = twGetDeviceThroughMatchMedia();\r\n\r\nfunction twDisableLazyRenderForRowsThatGetIntoView() {\r\n  var allLazyRenderableRows = document.querySelectorAll (\r\n    'body:not(.tw-builder) #wrapper:not(.disable-lazy-render) main#content .tw-builder-content &gt; .row[style*='--cis' + device.substr(0,1).toUpperCase() + ':']:not(.rendered), body:not(.tw-builder) #wrapper:not(.disable-lazy-render) footer#tw-footer .tw-builder-content &gt; .row[style*='--cis' + device.substr(0,1).toUpperCase() + '']:not(.rendered)'\r\n  );\r\n  var iLazyRenderableRow, lazyRenderableRow;\r\n  for(iLazyRenderableRow = 0; iLazyRenderableRow &lt; allLazyRenderableRows.length; iLazyRenderableRow++) {\r\n    lazyRenderableRow = allLazyRenderableRows.item(iLazyRenderableRow);\r\n    if(twInViewport(lazyRenderableRow, windowInnerHeight \/ 2)[1]) {\r\n      lazyRenderableRow.classList.add('rendered');\r\n    }\r\n  }\r\n}\r\n\r\nfunction twRenderedRowsIntersectionObserver(entries, observer) {\r\n  entries.forEach (\r\n    function(entry) {\r\n      if(twInViewport(entry.target, windowInnerHeight \/ 2)[1]) {\r\n        entry.target.classList.add('rendered');\r\n      }\r\n    }\r\n  );\r\n}\r\n\r\nvar renderedRowsObserver;\r\nwindow.addEventListener('load', function() {\r\n  renderedRowsObserver = new IntersectionObserver(twRenderedRowsIntersectionObserver, {\r\n    root: null,\r\n    rootMargin: '0px',\r\n    threshold: 0\r\n  });\r\n  document.querySelectorAll('body:not(.tw-builder) #wrapper:not(.disable-lazy-render) main#content .tw-builder-content &gt; .row[style*='--cis' + device.substr(0,1).toUpperCase() + ':']:not(.rendered), body:not(.tw-builder) #wrapper:not(.disable-lazy-render) footer#tw-footer .tw-builder-content &gt; .row[style*='--cis' + device.substr(0,1).toUpperCase() + '']:not(.rendered)').forEach(function(el) {\r\n    renderedRowsObserver.observe(el);\r\n  });\r\n  window.addEventListener('scroll', twDisableLazyRenderForRowsThatGetIntoView);\r\n});\r\n<\/code><\/tw-pre><p><b>Important note<\/b>: if you want to use this code, be sure to modify the class names and media queries to fit the web design of your own website.<\/p><hr><p><strong>I hope this inspired you to come up with your own solution for calculating <span class=\"code css-code\">contain-intrinsic-size<\/span> for <span class=\"code css-code\">content-visibility: auto<\/span>, or to try an approach similar to mine \u2014 a web design system that linearly scales sizes and spacings throughout three types of devices: desktop, tablet, and mobile.<\/strong><\/p><\/div><\/div><aside class=\"row all t__content-in-container m__content-in-container d__in-container v-center bg-yellow__light m__vertical color-scheme-light__dark bg-yellow__dark t__vertical t__h-center t__c m__c\" data-cache-vw-d=\"1512\" data-cache-h-d=\"318.53125\" data-cache-vw-t=\"617\" data-cache-h-t=\"836.5546875\" data-cache-vw-m=\"462\" data-cache-h-m=\"870.9609375\"><div class=\"col all w-1\/d\/3 w-10\/t\/13\"><h2 class=\"t__h1 wrap-balance anim-fade-in\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/h2><a class=\"button bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><div class=\"col all\"><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/website-builder-ai-bizbuilder-homepage.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3020\" height=\"1645\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/website-builder-ai-bizbuilder-homepage-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"193.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"272.796875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"219.4921875\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/bizbuilder-dienst-pagina-desktop.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3840\" height=\"2160\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/bizbuilder-dienst-pagina-desktop-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"200.40625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"282.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"227.390625\" data-img-of-m=\"fill\"><\/div><\/div><\/div><\/aside><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CSS property content-visibility can be used to easily improve rendering performance, but it should be used in conjunction with contain-intrinsic-size to be practical.If you have looked into this before, you might know that using value auto for property content-visibility tells the browser to only render a row if it&#8217;s inside of your viewport.Basically it makes <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":6414,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56],"tags":[],"class_list":["post-6430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Calculate contain-intrinsic-size for content-visibility &#8211; Terluin Webdesign<\/title>\n<meta name=\"description\" content=\"Learn how to calculate contain-intrinsic-size in order to seemlessly leverage content-visibility to boost rendering performance of websites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Calculate contain-intrinsic-size for content-visibility &#8211; Terluin Webdesign\" \/>\n<meta property=\"og:description\" content=\"Learn how to calculate contain-intrinsic-size in order to seemlessly leverage content-visibility to boost rendering performance of websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-16T22:06:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T15:00:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thijs Terluin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thijs Terluin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/\"},\"author\":{\"name\":\"Thijs Terluin\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\"},\"headline\":\"Calculating &#8216;contain-intrinsic-size&#8217; for &#8216;content-visibility&#8217;\",\"datePublished\":\"2020-09-16T22:06:52+00:00\",\"dateModified\":\"2025-07-18T15:00:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/\"},\"wordCount\":4,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png\",\"articleSection\":[\"Blog\",\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/\",\"name\":\"Calculate contain-intrinsic-size for content-visibility &#8211; Terluin Webdesign\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png\",\"datePublished\":\"2020-09-16T22:06:52+00:00\",\"dateModified\":\"2025-07-18T15:00:55+00:00\",\"description\":\"Learn how to calculate contain-intrinsic-size in order to seemlessly leverage content-visibility to boost rendering performance of websites.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png\",\"width\":1200,\"height\":675,\"caption\":\"CSS contain-intrinsic-size for content-visibility: rendered size vs intrinsic size\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\",\"name\":\"Thijs Terluin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"caption\":\"Thijs Terluin\"},\"description\":\"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thijs-terluin\/\"],\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Calculate contain-intrinsic-size for content-visibility &#8211; Terluin Webdesign","description":"Learn how to calculate contain-intrinsic-size in order to seemlessly leverage content-visibility to boost rendering performance of websites.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/","og_locale":"en_US","og_type":"article","og_title":"Calculate contain-intrinsic-size for content-visibility &#8211; Terluin Webdesign","og_description":"Learn how to calculate contain-intrinsic-size in order to seemlessly leverage content-visibility to boost rendering performance of websites.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_published_time":"2020-09-16T22:06:52+00:00","article_modified_time":"2025-07-18T15:00:55+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png","type":"image\/png"}],"author":"Thijs Terluin","twitter_card":"summary_large_image","twitter_creator":"@terluinwdesign","twitter_site":"@terluinwdesign","twitter_misc":{"Written by":"Thijs Terluin","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#article","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/"},"author":{"name":"Thijs Terluin","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd"},"headline":"Calculating &#8216;contain-intrinsic-size&#8217; for &#8216;content-visibility&#8217;","datePublished":"2020-09-16T22:06:52+00:00","dateModified":"2025-07-18T15:00:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/"},"wordCount":4,"commentCount":20,"publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png","articleSection":["Blog","CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/","name":"Calculate contain-intrinsic-size for content-visibility &#8211; Terluin Webdesign","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png","datePublished":"2020-09-16T22:06:52+00:00","dateModified":"2025-07-18T15:00:55+00:00","description":"Learn how to calculate contain-intrinsic-size in order to seemlessly leverage content-visibility to boost rendering performance of websites.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/calculating-contain-intrinsic-size-for-content-visibility\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/css-calculating-contain-intrinsic-size-for-content-visibility-auto.png","width":1200,"height":675,"caption":"CSS contain-intrinsic-size for content-visibility: rendered size vs intrinsic size"},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]},{"@type":"Person","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd","name":"Thijs Terluin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","caption":"Thijs Terluin"},"description":"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.","sameAs":["https:\/\/www.linkedin.com\/in\/thijs-terluin\/"],"url":"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=6430"}],"version-history":[{"count":1,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6430\/revisions"}],"predecessor-version":[{"id":9089,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6430\/revisions\/9089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media\/6414"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=6430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/categories?post=6430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/tags?post=6430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}