This example demonstrates the following aspects of the web component:
transform*
and
clip-path
would normally cause an overflow and thus
unwanted scrollbars. To prevent this, the web component sets CSS
containment (contain: paint;
) on its parent. This does not
prevent scrollbars altogether: the scrollbars caused by other elements
are still there.
data-disabled="css-contain"
HTML attribute. Test it by
clicking the Enable CSS containment
checkbox.
NOTE: on Safari, toggling the checkbox has no effect until the
viewport gets resized or the component's CSS transform*
is
touched.
Text designed to provoke a scrollbar.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.