[css-backgrounds] Border radius and scrollbars

[mrego]

I've found that the behavior of the following example is very different in Chromium/WebKit vs Firefox:

<div style="width: 500px; height: 500px; border-radius: 100px;
            border: solid thick; background: magenta; overflow: scroll;">
</div>

In Chromium/WebKit border-radius still applies to the corners with scrollbars (all but the top-left corner), however in Firefox it only applies to the top-left corner.

According to the spec (https://drafts.csswg.org/css-backgrounds-3/#corner-clipping):

Other effects that clip to the border or padding edge (such as overflow other than visible) also must clip to the curve.

I understand it means that it should clip all the corners, but I'm not sure if that makes a lot of sense having scrollbars, at least the Chromium/WebKit behavior is kind of weird.

What's the expected behavior here? Should we update the spec accordingly?

[emilio]

For reference, what Firefox does is https://bugzilla.mozilla.org/show_bug.cgi?id=459144 (reducing the radii should it occlude scrollbars).

[smfr]

https://twitter.com/smfr/status/1092285013825998848

[mrego]

From the twitter thread, it seems there's actually text on the spec about Firefox behavior:

If the curve interferes with UI elements such as scrollbars, the UA may further reduce the used value of the affected border radii (and only the affected border radii) as much as necessary, but no more.

[fantasai]

@mrego Closing out as invalid per your last comment, re-open if you want something changed in the spec!