[css-overflow-5] overflow-clip-margin: content-box should not apply border radius to the content box.

[flackr]

The overflow-clip-margin property specified in css-overflow supports a content-box value. I'm not sure where it is specified, but in building a demo I found it to have unexpected behavior.

In particular, this is my setup. The element has border-radius: 50% and some left and top padding resulting in the content-area filled by the only child with a pale yellow background:

When we apply overflow: clip; overflow-clip-margin: content-box to the container however, the border radius is applied to the clipping content-box:

I would have expected it to clip to the content box with the corners slightly clipped due to intruding border, i.e.

[flackr]

@vmpstr

[vmpstr]

In https://drafts.csswg.org/css-overflow/#overflow-clip-margin, it says

The overflow clip edge is shaped in the corners exactly the same way as an outer box-shadow with a spread radius of the same cumulative offset from the box’s border edge.

which I believe is correct if you're using the default padding-box. If you're using the content-box as the reference though, perhaps the shape of the clip should be based on the shape of the content-box. I think the problem is that if you say overflow-clip-margin: content-box 50px while your border shape is rounded, then I'm not sure if the expectation is to have a square clip outside of the rounded border

[flackr]

I think the problem is that if you say overflow-clip-margin: content-box 50px while your border shape is rounded, then I'm not sure if the expectation is to have a square clip outside of the rounded border

Right, I don't think I would expect a square clip outside the rounded border - after all, my expectation is that up until the margin exceeds the padding I would not expect any of the content to be visible beyond the rounded padding / border edge.

This may be complicated, but I would expect the shape to spread following the padding / border shape once the length exceeds the padding (i.e. rounded by the padding / border shape). I'll have to think about what this means for the overall shape as one edge overshoots the padding-box more than the other edges. I.e. in this example the bottom/top edges would start to be rounded while the side edges are not yet until the side hits the padding edge. It can't just suddenly round the side edges completely as it would be an unexpected discontinuous jump.

[vmpstr]

Makes sense. In view transitions, specifically nested groups, we currently say that the ::view-transition-group-children element is sized to the same size as the original element with a transparent border of the same size and shape as the original element. The effect of this is that if the developer says overflow: clip on this, then everything will clip as expected. And it does.

Except if the original element has non-overlay scrollbars. So ideally, what we want to say is padding-bottom: ... for the width of the scrollbar and overflow-clip-margin: content-box to clip the actual content so that it doesn't draw overtop of the scrollbar, which should work. And it does.

Except if the corner shape is non-square, then we end up with the effect like you're describing, so we really do want to solve this in a way that you describe. All in all, I think it's important to solve this.

[fantasai]

You asked for content-box clipping so that's what you're getting. If you wanted padding-box clipping, you should have asked for that instead.

See https://www.w3.org/TR/css-backgrounds-3/#corner-shaping and https://www.w3.org/TR/css-box-3/#box-model

(If you want to visualize the content box, you can use background-clip: content-box.)

[tabatkins]

here's an example showing off what, i think, is the behavior you want

.card {
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  border: 30px solid black;
  border-radius: 50%;
  background: linear-gradient(orange 0 0) content-box, lightblue;
  padding: 8px 8px;
  position: relative;
  display: flex;
  font-size: 24px;
  text-align: center;
}

.card p {
  text-align: justify;
}

.card > div {
  background: #ffd8;
  padding: 8px;
  margin: 0 62px;
}

.clip {
  overflow: clip;
}
.content-box {
  overflow-clip-margin: content-box;
}

[Loirooriol]

I agree with fantasai. In fact, the default is overflow-clip-margin: padding-box 0px, which is precisely your expected behavior in the 3rd image. So you don't need to use overflow-clip-margin at all. If you explicilty set it to content-box, then it's on you.

[flackr]

Thanks, I was missing the context that the content-box does also take on the border shaping. It was surprising but I can see this is working as intended.

I agree with fantasai. In fact, the default is overflow-clip-margin: padding-box 0px, which is precisely your expected behavior in the 3rd image.

In this case yes, except if the content has overflow - as in the case I was trying to build this layout for. It seems that the only way to ensure the content is clipped to rectangle would be with a descendant applying the clip.

[vmpstr]

I'm personally interested in this in the context of nested view transitions where we have an ::view-transition-group-children element that is currently sized to the element's border box with a transparent border matching the shape and size of the border of the original element. This works and, when clipping, it's the right clip shape and size.

However, when we add non-overlay scrollbars to the original element, I'm unsure if it's at all possible to make an element which matches the clip shape that is produced without reproducing overflow: scroll. Note, ideally we'd want to set up an element in such a way that if it were to clip then the clip would match the original element's clip. We do not want to set up an element that clips by default (as would be the case with overflow: scroll).

Here's an example:

div {
    background: black;
    color: white;
    border-radius: 40px;
    width: 100px;
    height: 100px;
    padding: 1em;
    color: red;
    overflow: scroll;
  }

Safari, Chrome:

Firefox:

Notably this is not the same shape as the initial clip with overflow-clip-margin: content-box with some padding to account for the scrollbars, precisely because of the corner shape. I understand that making content-box be a square shape would also not help here, but I think it's still useful to have a discussion.

Also scrollbar-gutter which naively sounds like it should help here, doesn't help. Mostly because it doesn't affect block direction scrollbars and it doesn't seem to affect the clipping area, just reserves the space (maybe that one is a bug though, I'm not sure).

One possibility is to require that the developer clips using overflow-x/y: scroll. That gets a bit complicated if the original element had overflow: auto meaning the developer needs to first figure out if auto actually caused scrollbars (and optionally if they were non-overlay scrollbars)

Another option which I'd ideally want to avoid is to simply say ::view-transition-group-children has a magic clip shape that matches the right shape necessary to clip to the same area as the original element. This is bad for obvious reasons: we want to avoid magic

I personally don't know of a solution here, but that of course doesn't mean there isn't one :) Does anyone know how to solve this?

[flackr]

I personally don't know of a solution here, but that of course doesn't mean there isn't one :) Does anyone know how to solve this?

Without inventing something new and in light of the content box shaping discussed here, the only way I know of I mentioned above in #13388 (comment), which is to apply clipping on a child element, e.g.

::view-transition-group-children {
  border: /* size and shaping from original element */
  padding-right: 16px; /* Automatically added because the UA knew there was a right-side scrollbar. */
}

::view-transition-group-children-clip {
  overflow: clip;
}

Where ::view-transition-group-children-clip is the immediate child of ::view-transition-group-children and parent to the children. Here's a demo