| Summary: | outline with border-radius on wrapped span does not apply radius to all corners | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Tom Hamming <tom.hamming> | ||||||||||||||||||
| Component: | Layout and Rendering | Assignee: | zalan <zalan> | ||||||||||||||||||
| Status: | NEW --- | ||||||||||||||||||||
| Severity: | Normal | CC: | benoit.rouleau, bfulgham, simon.fraser, tom.hamming, webkit-bug-importer, zalan | ||||||||||||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||||||||||||
| Version: | Safari 16 | ||||||||||||||||||||
| Hardware: | Mac (Apple Silicon) | ||||||||||||||||||||
| OS: | macOS 13 | ||||||||||||||||||||
| Attachments: |
|
||||||||||||||||||||
Created attachment 466873 [details]
Chrome screenshot
Created attachment 466874 [details]
Safari 16 screenshot
Created attachment 466875 [details]
Safari Technical Preview 173 screenshot
By browserspy.com in my first comment I meant https://browserspy.dk/googlechrome.php Created attachment 466922 [details]
Patch
Created attachment 466923 [details]
sample HTML screenshot (with patch applied)
Created attachment 466924 [details]
Multiline screenshot
Created attachment 466926 [details]
Patch
Interesting. I was actually going to report a bug that assumes the complete opposite, which is that an outline's "wrapped" corners should NOT follow the border radius by default (note that it does even before the above patch, but only when the second line is not long enough to "meet" the start of the `span` on the first line, e.g. if you remove the text "with long text" in the sample HTML file you'll see what I mean). My reasoning is that by default, `-webkit-box-decoration-break` is `slice` and so the border radius should only apply to the left side of the first line and the right side of the last line. However, I agree that when `-webkit-box-decoration-break` is `clone`, this bug is valid (`-webkit-box-decoration-break` currently has no effect whatsoever on the outline, it seems, despite having an effect on the border). Note that Firefox works exactly like I'd assume: `box-decoration-break` has an effect on the outline's radius. I think Chrome (and now Safari) are wrong here. |
Created attachment 466872 [details] Sample HTML file If I have a <span> element whose contents wrap across multiple lines and I apply outline and border-radius to it, the inner corners created by the wrapping aren't rounded. As of Chrome Version 114.0.5735.198 (WebKit 537.36 according to browserspy.com), it renders all corners as rounded. I'm attaching a sample HTML file and screenshots of Chrome, Safari 16.5.1 on macOS 13.4.1, and Safari Technical Preview 173.