[css-backgrounds][css3-background] Consider removing the spread distance adjustment for small border radii

[mstange]

https://drafts.csswg.org/css-backgrounds-3/#shadow-shape contains this piece of text:

However, in order to create a sharper corner when the border radius is small, when the border radius is less than the spread distance, the spread distance is multiplied by the proportion 1 + (r-1)^3, where r is the ratio of the border radius to the spread distance, in calculating the corner radii of the spread shadow shape.

This seems to have originally been added in this commit: https://github.com/w3c/csswg-drafts/commit/170e7532494d4cadd7eca8bc86d9fbf2a25767fb

Has this been implemented by any browser? Firefox has not implemented it, and judging by the code here and here, Chrome hasn't either.

If there has been no interest from browser vendors, it may be a good idea to remove this section again.

If you decide to keep it, I think the case where the spread amount is negative needs some clarification (and the math may need to be double-checked).

[fantasai]

This section was added to create continuity between the shape of the shadow at a border-radius of zero and the shape of a shadow at a border-radius of not-zero. If there's a Web-compat limitation preventing us from implementing it, then we might need to re-evaluate, but if not we do have an interest in improving continuity in behavior for the sake of animations and transitions if nothing else. But also in this case the shadow seems to look more appropriately-shaped if the formula is followed: the curve is seems greatly exaggerated in the shadow otherwise.

I can raise it to the WG if you think the situation needs some re-evalutation, though. Lmk~

Testcase to play with

[fantasai]

You can also check out the widget at https://drafts.csswg.org/css-backgrounds-3/spread-radius which shows the various options we looked at for the behavior of r between zero and one.

[mstange]

Interesting! That's a very compelling argument. I have two requests, then:

1. Please mention that the purpose of this adjustment is to avoid discontinuous behavior at border-radius: 0.
2. Please clarify the behavior for inset box-shadows. If I understand correctly, for inset box shadows, all occurrences of "spread distance" need to be replaced with the "negative spread distance", because only negative spread distance values cause the border radius to be increased for inset box shadows. Maybe it would be good to introduce another variable here, like "shadow edge inflation", that's set to the spread radius for outset box shadows and the negative spread radius for inset box shadows.

[fantasai]

OK, I made two fixes (diffs linked above):

• Added “(and thus ensure continuity between round and sharp corners)” to the sentence describing the adjustment.
• Limited the adjustment to outer shadows only; the spread radius can only be a positive number, so for inner shadows there's no case where the shadow's radii grow.

Let me know if that works for you!

[dbaron]

• Limited the adjustment to outer shadows only; the spread radius can only be a positive number, so for inner shadows there's no case where the shadow's radii grow.

I'm confused by this change; the spec defines the meaning of negative spread distance, so it seems like this should still apply for negative spread distances on inner shadows.

(I noticed this while reviewing the changes for #675.)

[SelenIT]

Since Chrome implemented the change, some authors started complaining about the new behavior. It seems that taking into accound only absolute values of radius and spread without accounting for the size of the element itself (i.e. relative corner radius) breaks authors' expectations in many practical cases, especially large shadows of fully rounded shapes (border-radius:50%) which authors expect to remain completely rounded instead of turning into rounded squares.

Isn't it late to reconsider the adjustment to account for the relative corner radii, e.g. like proposed here?