Contain

Isolate element rendering for performance

Syntax

visual="contain:[value]"

Values

Value	CSS Output	Description
none	contain: none	No containment
strict	contain: strict	Full containment
content	contain: content	Content containment
size	contain: size	Size containment
layout	contain: layout	Layout containment
style	contain: style	Style containment
paint	contain: paint	Paint containment

Examples

<div visual="contain:strict">Isolated rendering</div>
<div visual="contain:content">Content isolation</div>

Preview

Contain

visual="contain:strict" - Isolate element from rest of page for performance

none

content

strict

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">strict</div>
 </div>