Re: [csswg-drafts] [css-backgrounds] The shape of box-shadow should be a circle for a box with border-radius:50% and big spread (#7103)

The CSS Working Group just discussed `box shadows and circles`.

<details><summary>The full IRC log of that discussion</summary>
&lt;TabAtkins> Topic: box shadows and circles<br>
&lt;TabAtkins> github: https://github.com/w3c/csswg-drafts/issues/7103<br>
&lt;TabAtkins> oriol: When you specify border-radius, the length is the corner radius of the outer border edge<br>
&lt;TabAtkins> oriol: For inner edge we subtract the border width from that<br>
&lt;TabAtkins> oriol: Spread is the opposite<br>
&lt;TabAtkins> oriol: Initial vaule of spread is 0 tho, so this would make an ellipitical border radius ahve corners<br>
&lt;TabAtkins> oriol: Firefox has special case for spread radius of 0, keeping it sharp. But 0.1 makes rounded corners<br>
&lt;TabAtkins> oriol: Suggest adding a correction term that gives sharp corners at 0 and continouously transforms to round.<br>
&lt;TabAtkins> oriol: So the issue: if you say border-radius:50% you get an ellipse.<br>
&lt;TabAtkins> oriol: If you have a shadow you probably also expect it will be an ellipse.<br>
&lt;TabAtkins> oriol: Blink changed impl to match the spec, and people complained their shadows were no longer circles.<br>
&lt;TabAtkins> oriol: Proposal in the issue is, instead of adding the spread distance and subtracting a correction term, we could express the border-radius as a % and then, for the shadow, we use the same % but resolved agaisnt th esize of th eshadow<br>
&lt;TabAtkins> oriol: This seems to improve various cases, we have posted images in the thread<br>
&lt;TabAtkins> oriol: Shadows look better, stay circular<br>
&lt;astearns> images in this comment: https://github.com/w3c/csswg-drafts/issues/7103#issuecomment-1146870682<br>
&lt;TabAtkins> oriol: Downside is if you specify a length, and elemnet has circular corners, shadow will have circular corners. New change will instead make them elliptical if the box isn't square<br>
&lt;TabAtkins> oriol: Vlad suggested a variant where we only resolve to a % in one axis, then keep the same aspect ratio for the corner<br>
&lt;astearns> problem ellipse images in this comment: https://github.com/w3c/csswg-drafts/issues/7103#issuecomment-1168157338<br>
&lt;TabAtkins> oriol: Problem is if th eelement is a full ellipse, you won't get an ellipse shadow. Circles stay circles but in an ellipse you'll get flat edges on the short axis.<br>
&lt;TabAtkins> oriol: I proposed another idea - we could say that for the shadow we just add spread-distance to the border-radius<br>
&lt;TabAtkins> oriol: This would imply that for 0px you'd have rounded corners<br>
&lt;TabAtkins> oriol: But we'd also change the initial value for border-radius is "none", which would stay sharp. Unsure about compat tho.<br>
&lt;TabAtkins> oriol: fantasai proposed interpolating between some radius formulas.<br>
&lt;TabAtkins> oriol: Various options, not sure which is best.<br>
&lt;TabAtkins> fantasai: Two ideas. One is the problem is largely around circular/oval shapes. Many of those are done with %s.<br>
&lt;TabAtkins> fantasai: So we could say if the radius is a % we maintain it as a % in the spread shape.<br>
&lt;TabAtkins> fantasai: Dunno if that really works since the other way to do a circle is to do a huge px length and we scale it down.<br>
&lt;TabAtkins> fantasai: So it depends on how authors are specifying things.<br>
&lt;TabAtkins> fantasai: Another possibility is to interpolate based on how much of a straight side we have.<br>
&lt;TabAtkins> fantasai: So if the straight side is longer than the radius, we use existing formula which is good for rectangular shapes<br>
&lt;TabAtkins> fantasai: If straight side is 0 we use the % formula<br>
&lt;TabAtkins> fantasai: And between we can interpolate.<br>
&lt;fantasai> TabAtkins: I hadn't gone this deep before, I suspect I have opinions, but would like to take up at a later call, maybe at F2F<br>
&lt;fantasai> fantasai: F2F sounds good, can draw stuff<br>
&lt;fantasai> astearns: Leading up to F2F, we should have a set of things to test against<br>
&lt;fantasai> astearns: We absolutely need to fix the spec<br>
&lt;fantasai> astearns: I'm not sure that we have a fix that is good enough for all the edge cases yet<br>
&lt;TabAtkins> fantasai: We have a bunch of example scurrently, both working and not.<br>
&lt;fantasai> s/have/need to have/<br>
&lt;TabAtkins> I suspect we might need to address this semantically at the border-radius side with a keyword that does ellipse.<br>
&lt;TabAtkins> astearns: Can I ask Oriol to list out the cases to consider?<br>
&lt;TabAtkins> astearns: Summarizing them in the issue, and people can respond in the issue.<br>
&lt;TabAtkins> astearns: We'll tag this for f2f and come back to it<br>
&lt;fantasai> https://drafts.csswg.org/css-backgrounds-3/spread-radius<br>
&lt;TabAtkins> fantasai: We also have this which we can update<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7103#issuecomment-1170218949 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 29 June 2022 16:37:14 UTC