Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mstange opened this issue Oct 23, 2017 · 6 comments

Comments

@mstange
Copy link

mstange commented Oct 23, 2017

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: 170e753

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
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Author

mstange commented Oct 24, 2017

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 added a commit that referenced this issue Feb 14, 2018
fantasai added a commit that referenced this issue Feb 14, 2018
…t for outset shadows; inset shadows don't need it because their radii shrink rather than grow. #1900
@fantasai
Copy link
Collaborator

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
Copy link
Member

dbaron commented Nov 6, 2019

  • 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
Copy link
Collaborator

SelenIT commented Jun 5, 2022

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants