Re: [w3ctag/design-reviews] CSS overflow: clip and overflow-clip-margin (#579)

Here's an explainer. 

Prior to this work, it was not possible to have an element hide overflow and prevent scrolling of any kind (programmatic or user). The ‘clip’ value of ‘overflow’ adds this functionality. That is, the content is clipped to the element's padding box and scrolling of any kind is not allowed. The element is not a scroll container, and does not start a new formatting context. If you wish to start a new formatting context, you can use display: flow-root to do so.

For some uses, it is desirable to modify the clipping edge. For example, the shadow of a child element should still be visible. The ‘overflow-clip-margin’ property determines precisely how far outside the element's bounds the element is allowed to paint before being clipped. ‘Overflow-clip-margin’ may be used with ‘overflow: clip’ as well as ‘contain: paint.’

The following illustrates using ‘overflow-clip-margin’ with ‘contain: paint.’ For browsers that support overflow-clip-margin the box-shadow will be visible.

#container {
  width: 100px;
  height: 100px;
  contain: paint;
  overflow-clip-margin: 10px;
}
#child {
  width: 100px;
  height: 100px;
  box-shadow: 8px 8px blue;
  border: 1px solid;
}
</style>
<div id="container">
  <div id="child"></div>
</div>

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/579#issuecomment-767743632