1"use strict";(self.webpackChunkframeright_docs=self.webpackChunkframeright_docs||[]).push([[2168],{3905:(e,t,n)=>{n.d(t,{Zo:()=>l,kt:()=>b});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=r.createContext({}),p=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},l=function(e){var t=p(e.components);return r.createElement(c.Provider,{value:t},e.children)},m="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,c=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),m=p(n),d=o,b=m["".concat(c,".").concat(d)]||m[d]||u[d]||a;return n?r.createElement(b,i(i({ref:t},l),{},{components:n})):r.createElement(b,i({ref:t},l))}));function b(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=d;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s[m]="string"==typeof e?e:o,i[1]=s;for(var p=2;p<a;p++)i[p]=n[p];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},2235:(e,t,n)=>{n.d(t,{P:()=>a});var r=n(7294),o=n(9960);function a(e){let{href:t}=e;return r.createElement(o.Z,{className:"github-corner-icon",href:t},r.createElement("img",{src:"/img/thirdparty/github-mark.svg",alt:"GitHub repository"}))}},597:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>d,frontMatter:()=>i,metadata:()=>c,toc:()=>l});var r=n(7462),o=(n(7294),n(3905)),a=n(2235);const i={sidebar_position:70,tags:["explanation"]},s="CSS containment",c={unversionedId:"web-component/css-containment",id:"web-component/css-containment",title:"CSS containment",description:"CSS containment",source:"@site/docs/web-component/css-containment.md",sourceDirName:"web-component",slug:"/web-component/css-containment",permalink:"/web-component/css-containment",draft:!1,editUrl:"https://github.com/frameright/docs.frameright.io/tree/main/docs/web-component/css-containment.md",tags:[{label:"explanation",permalink:"/tags/explanation"}],version:"current",sidebarPosition:70,frontMatter:{sidebar_position:70,tags:["explanation"]},sidebar:"documentationSidebar",previous:{title:"CSS styling",permalink:"/web-component/styling"},next:{title:"Attribute reference",permalink:"/web-component/attribute-ref"}},p={},l=[],m={toc:l},u="wrapper";function d(e){let{components:t,...n}=e;return(0,o.kt)(u,(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"css-containment"},"CSS containment"),(0,o.kt)(a.P,{href:"https://github.com/Frameright/image-display-control-web-component",mdxType:"GitHubCornerIcon"}),(0,o.kt)("p",null,(0,o.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment"},"CSS containment"),"\nis a set of browser features allowing web developers to indicate that an element\nand its contents are, as much as possible, independent of the rest of the\ndocument."),(0,o.kt)("p",null,"For example, when setting ",(0,o.kt)("inlineCode",{parentName:"p"},"contain: paint;")," on an element, the browser then\nknows for a fact that the element and its children don't intend to draw anything\noutside of the element's\n",(0,o.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model"},"box"),".\nThis allows the browser to skip a lot of calculations, which can result in a\nsignificant performance boost."),(0,o.kt)("p",null,"The web component uses the ",(0,o.kt)("inlineCode",{parentName:"p"},"transform*")," CSS properties in order to zoom in on a\nregion. Although it also uses the ",(0,o.kt)("inlineCode",{parentName:"p"},"clip-path")," CSS property in order to clip what\nis outside its box, the browser doesn't know by default that the web component\ndoesn't intend to draw at all outside its box and reserves space for it. This\ncauses an overflow and thus unwanted scrollbars."),(0,o.kt)("p",null,"To prevent this, the web component sets ",(0,o.kt)("inlineCode",{parentName:"p"},"contain: paint;")," on its parent element\nby default. This may not be supported on older browsers and you can tweak this\nbehavior. See ",(0,o.kt)("a",{parentName:"p",href:"/web-component/browsers"},"browser support")," and\n",(0,o.kt)("a",{parentName:"p",href:"/web-component/attribute-ref"},"attribute reference")," for more details."))}d.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.