[{"data":1,"prerenderedAt":954},["ShallowReactive",2],{"content:\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fcontain-intrinsic-size-to-stop-scrollbar-jumps":3,"surroundings:\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fcontain-intrinsic-size-to-stop-scrollbar-jumps":946},{"id":4,"title":5,"body":6,"description":925,"extension":926,"meta":927,"navigation":939,"path":940,"seo":941,"stem":944,"__hash__":945},"content\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fcontain-intrinsic-size-to-stop-scrollbar-jumps\u002Findex.md","contain-intrinsic-size to Stop Scrollbar Jumps",{"type":7,"value":8,"toc":907},"minimark",[9,14,38,45,152,157,193,197,203,209,215,221,225,230,308,312,379,383,386,485,489,498,573,577,580,584,597,694,698,707,711,714,718,744,748,754,760,766,776,780,795,804,813,822,838,847,856,865,869,892,897,900,903],[10,11,13],"h1",{"id":12},"how-to-use-contain-intrinsic-size-to-stop-scrollbar-jumps","How to Use contain-intrinsic-size to Stop Scrollbar Jumps",[15,16,17,18,23,24,28,29,33,34,37],"p",{},"This guide is part of ",[19,20,22],"a",{"href":21},"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002F","CSS Containment & content-visibility",", within ",[19,25,27],{"href":26},"\u002Frendering-css-performance\u002F","Rendering & CSS Performance",". When ",[30,31,32],"code",{},"content-visibility: auto"," skips rendering a section, the browser needs to know how much space that section takes; otherwise it would treat it as zero height. ",[30,35,36],{},"contain-intrinsic-size"," provides that placeholder size. If the placeholder is far from the real size, the page's total height changes as sections render during scrolling. The scrollbar thumb jumps, the page may lurch, anchor links land in the wrong place, and scroll-linked UI misbehaves.",[15,39,40,41,44],{},"Getting placeholder sizes right — and using the ",[30,42,43],{},"auto"," keyword so the browser remembers real sizes after rendering — removes nearly all of these problems while keeping the rendering savings.",[15,46,47],{},[48,49,55,56,55,63,55,67,55,70,55,79,55,85,55,94,55,100,55,105,55,110,55,113,55,116,55,120,55,123,55,126,55,131,55,135,55,137,55,141,55,143,55,146,55,149,55],"svg",{"viewBox":50,"width":51,"role":52,"ariaLabel":53,"style":54},"0 0 760 220","100%","img","Comparison of a fixed contain-intrinsic-size value and the auto keyword that remembers last rendered size.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[57,58],"rect",{"className":59,"x":61,"y":61,"width":51,"height":51,"fill":62},[60],"svg-canvas","0","#ffffff",[64,65,66],"title",{},"Fixed estimate vs auto remembered size",[68,69,53],"desc",{},[57,71],{"x":72,"y":72,"width":73,"height":74,"rx":75,"fill":76,"stroke":77,"style":78},"1","758","218","10","none","currentColor","stroke-opacity:0.18",[80,81,66],"text",{"x":82,"y":83,"fill":77,"style":84},"28.0","34.0","font-size:16px;font-weight:700",[57,86],{"x":82,"y":87,"width":88,"height":89,"rx":90,"fill":91,"stroke":92,"style":93},"56.0","340.0","142.0","6","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[80,95,99],{"x":96,"y":97,"fill":77,"style":98},"42.0","82.0","font-size:14px;font-weight:700","contain-intrinsic-size: 500px",[80,101,104],{"x":96,"y":102,"fill":77,"style":103},"108.0","font-size:12.5px;font-weight:700","•",[80,106,109],{"x":87,"y":102,"fill":77,"style":107,"textAnchor":108},"font-size:12.5px","start","Same placeholder before and after rendering",[80,111,104],{"x":96,"y":112,"fill":77,"style":103},"132.0",[80,114,115],{"x":87,"y":112,"fill":77,"style":107,"textAnchor":108},"Height changes every time a section is skipped",[80,117,119],{"x":87,"y":118,"fill":77,"style":107,"textAnchor":108},"148.0","again",[80,121,104],{"x":96,"y":122,"fill":77,"style":103},"172.0",[80,124,125],{"x":87,"y":122,"fill":77,"style":107,"textAnchor":108},"Scrollbar keeps jumping on scroll back",[57,127],{"x":128,"y":87,"width":88,"height":89,"rx":90,"fill":129,"stroke":129,"style":130},"392.0","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[80,132,134],{"x":133,"y":97,"fill":77,"style":98},"406.0","contain-intrinsic-size: auto 500px",[80,136,104],{"x":133,"y":102,"fill":77,"style":103},[80,138,140],{"x":139,"y":102,"fill":77,"style":107,"textAnchor":108},"420.0","Estimate used only until first render",[80,142,104],{"x":133,"y":112,"fill":77,"style":103},[80,144,145],{"x":139,"y":112,"fill":77,"style":107,"textAnchor":108},"Real size remembered after rendering",[80,147,104],{"x":133,"y":148,"fill":77,"style":103},"156.0",[80,150,151],{"x":139,"y":148,"fill":77,"style":107,"textAnchor":108},"Stable scrolling once sections are seen",[153,154,156],"h2",{"id":155},"rapid-diagnosis","Rapid Diagnosis",[158,159,160,172,178,187],"ul",{},[161,162,163,167,168,171],"li",{},[164,165,166],"strong",{},"Watch the scrollbar thumb"," while scrolling a page with ",[30,169,170],{},"content-visibility",". Jumps or size changes mean placeholder sizes are wrong.",[161,173,174,177],{},[164,175,176],{},"Test anchor links"," to late sections; landing above or below the target indicates size drift above it.",[161,179,180,183,184,186],{},[164,181,182],{},"Inspect sections in DevTools",": compare the rendered height with the ",[30,185,36],{}," value.",[161,188,189,192],{},[164,190,191],{},"Check for CLS reports"," while scrolling in lab tools with scroll interactions.",[153,194,196],{"id":195},"root-cause-analysis","Root Cause Analysis",[15,198,199,202],{},[164,200,201],{},"1. No intrinsic size."," Skipped sections collapse to zero.",[15,204,205,208],{},[164,206,207],{},"2. One estimate for all sections."," Real heights vary widely between sections.",[15,210,211,214],{},[164,212,213],{},"3. Fixed values without auto."," Sections revert to the estimate when skipped again.",[15,216,217,220],{},[164,218,219],{},"4. Responsive layouts."," Heights differ greatly between mobile and desktop.",[153,222,224],{"id":223},"step-by-step-resolution","Step-by-Step Resolution",[226,227,229],"h3",{"id":228},"_1-always-use-auto-with-an-estimate","1. Always use auto with an estimate",[231,232,237],"pre",{"className":233,"code":234,"language":235,"meta":236,"style":236},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast",".section {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 800px;   \u002F* auto = remember last rendered size *\u002F\n}\n\u002F* trade-off: remembered sizes only exist after a section has rendered once, so\n   the first scroll through the page still depends on the estimate. *\u002F\n","css","",[30,238,239,252,266,290,296,302],{"__ignoreMap":236},[240,241,244,248],"span",{"class":242,"line":243},"line",1,[240,245,247],{"class":246},"sPXB4",".section",[240,249,251],{"class":250},"saISM"," {\n",[240,253,255,258,261,263],{"class":242,"line":254},2,[240,256,257],{"class":246},"  content-visibility",[240,259,260],{"class":250},": ",[240,262,43],{"class":246},[240,264,265],{"class":250},";\n",[240,267,269,272,274,276,279,283,286],{"class":242,"line":268},3,[240,270,271],{"class":246},"  contain-intrinsic-size",[240,273,260],{"class":250},[240,275,43],{"class":246},[240,277,278],{"class":246}," 800",[240,280,282],{"class":281},"sPARh","px",[240,284,285],{"class":250},";   ",[240,287,289],{"class":288},"sjfSM","\u002F* auto = remember last rendered size *\u002F\n",[240,291,293],{"class":242,"line":292},4,[240,294,295],{"class":250},"}\n",[240,297,299],{"class":242,"line":298},5,[240,300,301],{"class":288},"\u002F* trade-off: remembered sizes only exist after a section has rendered once, so\n",[240,303,305],{"class":242,"line":304},6,[240,306,307],{"class":288},"   the first scroll through the page still depends on the estimate. *\u002F\n",[226,309,311],{"id":310},"_2-use-per-breakpoint-estimates","2. Use per-breakpoint estimates",[231,313,315],{"className":233,"code":314,"language":235,"meta":236,"style":236},".section { contain-intrinsic-size: auto 1400px; }        \u002F* mobile: tall *\u002F\n@media (min-width: 900px) { .section { contain-intrinsic-size: auto 800px; } }\n",[30,316,317,341],{"__ignoreMap":236},[240,318,319,321,324,326,328,330,333,335,338],{"class":242,"line":243},[240,320,247],{"class":246},[240,322,323],{"class":250}," { ",[240,325,36],{"class":246},[240,327,260],{"class":250},[240,329,43],{"class":246},[240,331,332],{"class":246}," 1400",[240,334,282],{"class":281},[240,336,337],{"class":250},"; }        ",[240,339,340],{"class":288},"\u002F* mobile: tall *\u002F\n",[240,342,343,346,349,352,354,357,359,362,364,366,368,370,372,374,376],{"class":242,"line":254},[240,344,345],{"class":281},"@media",[240,347,348],{"class":250}," (",[240,350,351],{"class":246},"min-width",[240,353,260],{"class":250},[240,355,356],{"class":246},"900",[240,358,282],{"class":281},[240,360,361],{"class":250},") { ",[240,363,247],{"class":246},[240,365,323],{"class":250},[240,367,36],{"class":246},[240,369,260],{"class":250},[240,371,43],{"class":246},[240,373,278],{"class":246},[240,375,282],{"class":281},[240,377,378],{"class":250},"; } }\n",[226,380,382],{"id":381},"_3-generate-per-section-estimates-when-sizes-vary-greatly","3. Generate per-section estimates when sizes vary greatly",[15,384,385],{},"For content with very different section lengths, compute an estimate per section at build or render time (for example from word count and image count) and set it inline.",[231,387,391],{"className":388,"code":389,"language":390,"meta":236,"style":236},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F Build step: estimate height from content, emit as a custom property.\nconst est = Math.round(120 + words * 0.42 + images * 360);   \u002F\u002F px, mobile profile\nhtml = `\u003Csection style=\"--est:${est}px\" class=\"section\">…\u003C\u002Fsection>`;\n\u002F\u002F CSS: .section { contain-intrinsic-size: auto var(--est); }\n\u002F\u002F trade-off: the heuristic needs tuning per template; measure real heights once\n\u002F\u002F and fit the coefficients rather than guessing.\n","javascript",[30,392,393,398,450,470,475,480],{"__ignoreMap":236},[240,394,395],{"class":242,"line":243},[240,396,397],{"class":288},"\u002F\u002F Build step: estimate height from content, emit as a custom property.\n",[240,399,400,403,406,409,412,416,419,422,425,428,431,434,436,439,441,444,447],{"class":242,"line":254},[240,401,402],{"class":281},"const",[240,404,405],{"class":246}," est",[240,407,408],{"class":281}," =",[240,410,411],{"class":250}," Math.",[240,413,415],{"class":414},"smZ65","round",[240,417,418],{"class":250},"(",[240,420,421],{"class":246},"120",[240,423,424],{"class":281}," +",[240,426,427],{"class":250}," words ",[240,429,430],{"class":281},"*",[240,432,433],{"class":246}," 0.42",[240,435,424],{"class":281},[240,437,438],{"class":250}," images ",[240,440,430],{"class":281},[240,442,443],{"class":246}," 360",[240,445,446],{"class":250},");   ",[240,448,449],{"class":288},"\u002F\u002F px, mobile profile\n",[240,451,452,455,458,462,465,468],{"class":242,"line":268},[240,453,454],{"class":250},"html ",[240,456,457],{"class":281},"=",[240,459,461],{"class":460},"sZ8jY"," `\u003Csection style=\"--est:${",[240,463,464],{"class":250},"est",[240,466,467],{"class":460},"}px\" class=\"section\">…\u003C\u002Fsection>`",[240,469,265],{"class":250},[240,471,472],{"class":242,"line":292},[240,473,474],{"class":288},"\u002F\u002F CSS: .section { contain-intrinsic-size: auto var(--est); }\n",[240,476,477],{"class":242,"line":298},[240,478,479],{"class":288},"\u002F\u002F trade-off: the heuristic needs tuning per template; measure real heights once\n",[240,481,482],{"class":242,"line":304},[240,483,484],{"class":288},"\u002F\u002F and fit the coefficients rather than guessing.\n",[226,486,488],{"id":487},"_4-use-separate-width-and-height-when-needed","4. Use separate width and height when needed",[15,490,491,493,494,497],{},[30,492,36],{}," accepts width and height (",[30,495,496],{},"auto 300px auto 800px","); for block-level sections only the height usually matters, but for inline-size-contained elements set both.",[15,499,500],{},[48,501,55,504,55,507,55,510,55,512,55,515,55,517,55,524,55,531,55,536,55,540,55,545,55,549,55,552,55,556,55,560,55,564,55,569,55],{"viewBox":502,"width":51,"role":52,"ariaLabel":503,"style":54},"0 0 760 194","Bar chart of how far an anchor link lands from its target with different intrinsic size strategies.",[57,505],{"className":506,"x":61,"y":61,"width":51,"height":51,"fill":62},[60],[64,508,509],{},"Scroll position error when jumping to section 20",[68,511,503],{},[57,513],{"x":72,"y":72,"width":73,"height":514,"rx":75,"fill":76,"stroke":77,"style":78},"192",[80,516,509],{"x":82,"y":83,"fill":77,"style":84},[80,518,523],{"x":519,"y":520,"fill":77,"style":521,"textAnchor":522},"204.9","70.0","font-size:13px","end","No intrinsic size",[57,525],{"x":526,"y":87,"width":527,"height":528,"rx":529,"fill":76,"stroke":77,"style":530},"216.9","451.1","19","3","fill-opacity:0.7;stroke-opacity:0.35",[80,532,535],{"x":533,"y":520,"fill":77,"style":534},"674.0","font-size:12px;font-weight:600","9400px",[80,537,539],{"x":519,"y":538,"fill":77,"style":521,"textAnchor":522},"101.0","One fixed estimate",[57,541],{"x":526,"y":542,"width":543,"height":528,"rx":529,"fill":129,"stroke":129,"style":544},"87.0","88.8","fill-opacity:0.55;stroke-opacity:0.9",[80,546,548],{"x":547,"y":538,"fill":77,"style":534},"311.7","1850px",[80,550,551],{"x":519,"y":112,"fill":77,"style":521,"textAnchor":522},"auto + per-breakpoint estimate",[57,553],{"x":526,"y":554,"width":555,"height":528,"rx":529,"fill":129,"stroke":129,"style":544},"118.0","29.8",[80,557,559],{"x":558,"y":112,"fill":77,"style":534},"252.7","620px",[80,561,563],{"x":519,"y":562,"fill":77,"style":521,"textAnchor":522},"163.0","auto + per-section estimate",[57,565],{"x":526,"y":566,"width":567,"height":528,"rx":529,"fill":91,"stroke":92,"style":568},"149.0","3.4","fill-opacity:0.7;stroke-opacity:0.9",[80,570,572],{"x":571,"y":562,"fill":77,"style":534},"226.3","70px",[153,574,576],{"id":575},"verification","Verification",[15,578,579],{},"Scroll from top to bottom quickly, then back up, watching the scrollbar thumb; it should remain nearly constant in size. Follow anchor links to the last sections and check they land at the target. In DevTools, compare the computed height of skipped sections (the estimate) with rendered heights. Record a scroll in the Performance panel with Layout Shift Regions enabled to confirm no unexpected shifts.",[153,581,583],{"id":582},"worked-example-a-forum-thread-page","Worked Example: A Forum Thread Page",[15,585,586,587,589,590,593,594,596],{},"A forum rendered threads with up to 500 posts, applying ",[30,588,32],{}," to each post with ",[30,591,592],{},"contain-intrinsic-size: 200px",". Posts varied from one line to several screens with images. Users reported that the scrollbar \"kept moving\" and that \"jump to last unread\" links landed in random places. The team switched to ",[30,595,43],{}," with an estimate computed per post from text length and attachment count, emitted as a CSS custom property. Anchor accuracy improved to within one post, scrollbar jumps disappeared after the first scroll, and the rendering savings stayed the same: thread pages kept a 70% reduction in initial layout time.",[15,598,599],{},[48,600,55,603,55,606,55,609,55,611,55,628,55,631,55,633,55,637,55,643,55,648,55,651,55,655,55,658,55,661,55,665,55,668,55,671,55,675,55,678,55,686,55,690,55],{"viewBox":601,"width":51,"role":52,"ariaLabel":602,"style":54},"0 0 760 133","How an element with content-visibility auto and auto intrinsic size moves from estimate to remembered size.",[57,604],{"className":605,"x":61,"y":61,"width":51,"height":51,"fill":62},[60],[64,607,608],{},"Lifecycle of a remembered size",[68,610,602],{},[612,613,614],"defs",{},[615,616,623],"marker",{"id":617,"viewBox":618,"refX":619,"refY":620,"markerWidth":621,"markerHeight":621,"orient":622},"fa4bf1935a","0 0 10 10","9","5","7","auto-start-reverse",[624,625],"path",{"d":626,"fill":77,"style":627},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[57,629],{"x":72,"y":72,"width":73,"height":630,"rx":75,"fill":76,"stroke":77,"style":78},"131",[80,632,608],{"x":82,"y":83,"fill":77,"style":84},[57,634],{"x":82,"y":87,"width":635,"height":636,"rx":90,"fill":129,"stroke":129,"style":130},"146.0","55.0",[80,638,642],{"x":538,"y":639,"fill":77,"style":640,"textAnchor":641},"78.0","font-size:13px;font-weight:700","middle","Skipped",[80,644,647],{"x":538,"y":645,"fill":77,"style":646,"textAnchor":641},"96.0","font-size:12px","uses estimate",[57,649],{"x":650,"y":87,"width":635,"height":636,"rx":90,"fill":129,"stroke":129,"style":130},"214.0",[80,652,654],{"x":653,"y":639,"fill":77,"style":640,"textAnchor":641},"287.0","Near viewport",[80,656,657],{"x":653,"y":645,"fill":77,"style":646,"textAnchor":641},"renders contents",[57,659],{"x":660,"y":87,"width":635,"height":636,"rx":90,"fill":91,"stroke":92,"style":93},"400.0",[80,662,664],{"x":663,"y":639,"fill":77,"style":640,"textAnchor":641},"473.0","Size recorded",[80,666,667],{"x":663,"y":645,"fill":77,"style":646,"textAnchor":641},"last rendered height",[57,669],{"x":670,"y":87,"width":635,"height":636,"rx":90,"fill":129,"stroke":129,"style":130},"586.0",[80,672,674],{"x":673,"y":639,"fill":77,"style":640,"textAnchor":641},"659.0","Skipped again",[80,676,677],{"x":673,"y":645,"fill":77,"style":646,"textAnchor":641},"uses remembered size",[242,679],{"x1":680,"y1":681,"x2":682,"y2":681,"stroke":77,"strokeWidth":683,"style":684,"markerEnd":685},"174.0","83.5","212.0","1.5","stroke-opacity:0.6","url(#fa4bf1935a)",[242,687],{"x1":688,"y1":681,"x2":689,"y2":681,"stroke":77,"strokeWidth":683,"style":684,"markerEnd":685},"360.0","398.0",[242,691],{"x1":692,"y1":681,"x2":693,"y2":681,"stroke":77,"strokeWidth":683,"style":684,"markerEnd":685},"546.0","584.0",[153,695,697],{"id":696},"how-auto-remembers-sizes","How auto Remembers Sizes",[15,699,700,701,703,704,706],{},"With ",[30,702,43],{},", when an element with size containment from ",[30,705,170],{}," has been rendered, the browser records its last rendered size. When it is skipped again, that recorded size is used instead of the estimate. This happens per element and lasts for the life of the element in the document. If the element is removed and recreated (common in client-rendered lists that re-render), the remembered size is lost. In frameworks, prefer stable keys so elements persist across updates. Remembered sizes also reset across navigations, which is why the initial estimate still matters for anchor links followed from other pages.",[153,708,710],{"id":709},"measuring-real-sizes-to-calibrate-estimates","Measuring Real Sizes to Calibrate Estimates",[15,712,713],{},"Rather than guessing, measure. Load representative pages, let every section render (scroll to the bottom), and record each section's height with a ResizeObserver, along with simple features of its content: word count, number of images, number of code blocks. Fit a simple linear estimate from those features per template and breakpoint. Twenty or thirty pages per template are usually enough. Re-run the calibration when the design changes typography or spacing, since heights shift with every change to line height or margins.",[153,715,717],{"id":716},"common-mistakes","Common Mistakes",[158,719,720,726,732,738],{},[161,721,722,725],{},[164,723,724],{},"Omitting auto."," Sections snap back to the estimate when skipped again.",[161,727,728,731],{},[164,729,730],{},"Tiny estimates."," Make the document shorter than reality and push anchors upwards.",[161,733,734,737],{},[164,735,736],{},"One size for all breakpoints."," Mobile sections may be twice as tall as desktop ones.",[161,739,740,743],{},[164,741,742],{},"Re-creating elements on every render."," Remembered sizes are lost.",[153,745,747],{"id":746},"edge-cases","Edge Cases",[15,749,750,753],{},[164,751,752],{},"Horizontal layouts."," In horizontal scrollers, the width estimate matters; set both dimensions.",[15,755,756,759],{},[164,757,758],{},"Images without dimensions inside sections."," Real sizes change after images load; set image dimensions to keep remembered sizes accurate.",[15,761,762,765],{},[164,763,764],{},"Dynamic content growth."," Sections that expand (comments loading) update their remembered size after re-rendering.",[15,767,768,771,772,775],{},[164,769,770],{},"Container queries."," Size containment interacts with container queries; check that ",[30,773,774],{},"container-type"," and content-visibility are not on the same element unless intended.",[153,777,779],{"id":778},"faq","FAQ",[781,782,785,789],"details",{"className":783},[784],"faq-item",[786,787,788],"summary",{},"What does contain-intrinsic-size do?",[15,790,791,792,794],{},"It sets the size an element uses for layout when size containment applies — for example, when ",[30,793,32],{}," skips its contents.",[781,796,798,801],{"className":797},[784],[786,799,800],{},"What does the auto keyword do?",[15,802,803],{},"It tells the browser to remember the element's last rendered size and use it in place of the estimate after the element has been rendered once.",[781,805,807,810],{"className":806},[784],[786,808,809],{},"How accurate does the estimate need to be?",[15,811,812],{},"Within a factor of about two avoids most visible jumps on first scroll; per-section estimates are needed for accurate anchor links on very long pages.",[781,814,816,819],{"className":815},[784],[786,817,818],{},"Does a wrong estimate cause CLS?",[15,820,821],{},"Size changes of offscreen content generally do not count as layout shifts of visible elements, but they can move the scroll position and visible content in some cases. Accurate estimates minimise the risk.",[781,823,825,828],{"className":824},[784],[786,826,827],{},"Can I set contain-intrinsic-size without content-visibility?",[15,829,830,831,834,835,837],{},"Yes, with ",[30,832,833],{},"contain: size",", but then the element always uses the given size. The common use is together with ",[30,836,32],{},".",[781,839,841,844],{"className":840},[784],[786,842,843],{},"Is there a JavaScript API to read remembered sizes?",[15,845,846],{},"No direct API exists. You can measure rendered sizes with ResizeObserver and store them yourself if you need them across navigations.",[781,848,850,853],{"className":849},[784],[786,851,852],{},"Why do anchor links still land slightly off on first visit?",[15,854,855],{},"Sections above the target have not rendered yet, so the browser uses their estimates. Per-section estimates generated from content reduce this error.",[781,857,859,862],{"className":858},[784],[786,860,861],{},"Do I need different estimates for dark mode or font sizes?",[15,863,864],{},"Usually not for colour themes, but larger user font sizes make sections taller. Estimates in em or based on line counts scale better than fixed pixel values.",[153,866,868],{"id":867},"related","Related",[158,870,871,878,885],{},[161,872,873,877],{},[19,874,876],{"href":875},"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fusing-content-visibility-auto-on-long-pages\u002F","Using content-visibility: auto on long pages"," — where to apply the property.",[161,879,880,884],{},[19,881,883],{"href":882},"\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Ffixing-cls-from-skeleton-screens-that-resize\u002F","Fixing CLS from skeleton screens that resize"," — another placeholder sizing problem.",[161,886,887,891],{},[19,888,890],{"href":889},"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fisolating-widgets-with-css-contain\u002F","Isolating widgets with CSS contain"," — containment without skipping.",[893,894,896],"script",{"type":895},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Use contain-intrinsic-size to Stop Scrollbar Jumps\",\n  \"description\": \"How contain-intrinsic-size works with content-visibility, how to choose estimates, and how the auto keyword keeps scrolling stable.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Always use auto with an estimate\",\n      \"text\": \"Always use auto with an estimate\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Use per-breakpoint estimates\",\n      \"text\": \"Use per-breakpoint estimates\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Generate per-section estimates when sizes vary greatly\",\n      \"text\": \"For content with very different section lengths, compute an estimate per section at build or render time (for example from word count and image count) and set it inline.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Use separate width and height when needed\",\n      \"text\": \"contain-intrinsic-size accepts width and height (auto 300px auto 800px); for block-level sections only the height usually matters, but for inline-size-contained elements set both.\"\n    }\n  ]\n}\n",[893,898,899],{"type":895},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Use contain-intrinsic-size to Stop Scrollbar Jumps\",\n  \"description\": \"How contain-intrinsic-size works with content-visibility, how to choose estimates, and how the auto keyword keeps scrolling stable.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fcontain-intrinsic-size-to-stop-scrollbar-jumps\u002F\"\n  }\n}\n",[893,901,902],{"type":895},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Rendering & CSS Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"CSS Containment & content-visibility\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"contain-intrinsic-size to Stop Scrollbar Jumps\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fcontain-intrinsic-size-to-stop-scrollbar-jumps\u002F\"\n    }\n  ]\n}\n",[904,905,906],"style",{},"html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}",{"title":236,"searchDepth":254,"depth":254,"links":908},[909,910,911,917,918,919,920,921,922,923,924],{"id":155,"depth":254,"text":156},{"id":195,"depth":254,"text":196},{"id":223,"depth":254,"text":224,"children":912},[913,914,915,916],{"id":228,"depth":268,"text":229},{"id":310,"depth":268,"text":311},{"id":381,"depth":268,"text":382},{"id":487,"depth":268,"text":488},{"id":575,"depth":254,"text":576},{"id":582,"depth":254,"text":583},{"id":696,"depth":254,"text":697},{"id":709,"depth":254,"text":710},{"id":716,"depth":254,"text":717},{"id":746,"depth":254,"text":747},{"id":778,"depth":254,"text":779},{"id":867,"depth":254,"text":868},"How contain-intrinsic-size works with content-visibility, how to choose estimates, and how the auto keyword keeps scrolling stable.","md",{"slug":928,"type":929,"breadcrumb":930,"datePublished":938,"dateModified":938},"contain-intrinsic-size-to-stop-scrollbar-jumps","article",[931,934,935,936],{"name":932,"url":933},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":937},"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fcontain-intrinsic-size-to-stop-scrollbar-jumps\u002F","2026-10-06",true,"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fcontain-intrinsic-size-to-stop-scrollbar-jumps",{"title":942,"description":943},"contain-intrinsic-size: Stop Scrollbar Jumps and Shifts","Fix scrollbar jumps and anchor drift with content-visibility by setting contain-intrinsic-size with auto, per-template estimates, and remembered sizes.","rendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fcontain-intrinsic-size-to-stop-scrollbar-jumps\u002Findex","c_sF70dhoN7cxZsSCnnpPEDNpHFJ64-w99o5lQk6Kq8",[947,950],{"title":22,"path":948,"stem":949},"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility","rendering-css-performance\u002Fcss-containment-and-content-visibility\u002Findex",{"title":951,"path":952,"stem":953},"Isolating Widgets with CSS contain","\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fisolating-widgets-with-css-contain","rendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fisolating-widgets-with-css-contain\u002Findex",1791308077526]