Bug 255036 - REGRESSION (Safari 16.4): "box-decoration-break: clone" with "padding-right" is missing padding space
Summary: REGRESSION (Safari 16.4): "box-decoration-break: clone" with "padding-right" ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on: 255065
Blocks:
  Show dependency treegraph
 
Reported: 2023-04-05 09:51 PDT by Scott Rod
Modified: 2023-04-29 15:15 PDT (History)
7 users (show)

See Also:


Attachments
screenshot illustrating box-decoration bug (171.98 KB, image/png)
2023-04-05 09:51 PDT, Scott Rod
no flags Details
screenshot with local fix (545.54 KB, image/png)
2023-04-05 13:08 PDT, zalan
no flags Details
[fast-cq]Patch (3.44 KB, patch)
2023-04-05 13:39 PDT, zalan
no flags Details | Formatted Diff | Diff
Screenshot after 262652@main (497.93 KB, image/png)
2023-04-05 19:28 PDT, zalan
no flags Details
Screenshot showing the padding-right box-decoration-break clone is not working (772.09 KB, image/png)
2023-04-29 13:12 PDT, Julian Teare
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Scott Rod 2023-04-05 09:51:19 PDT
Created attachment 465778 [details]
screenshot illustrating box-decoration bug

The CSS `box-decoration-break: clone` now appears to be visually broken on Safari 16.4. The css property, `-webkit-box-decoration-break: clone` behaved fine on Safari's previous version, 16.3. This issue occurs across all Apple devices using Safari 16.4. To see the issue, simply visit https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
Comment 1 Alexey Proskuryakov 2023-04-05 11:01:52 PDT
Thank you for the report!

I cannot reproduce this with Safari 16.5 beta. All browsers render this differently, but Safari 16.5 beta rendering seems reasonable to me. Cc'ing folks who would know what changed.
Comment 2 zalan 2023-04-05 11:16:46 PDT
Let me grab this. Thank you Alexey!
Comment 3 Radar WebKit Bug Importer 2023-04-05 11:17:07 PDT
<rdar://problem/107668970>
Comment 4 zalan 2023-04-05 11:37:34 PDT
This is about padding-right not taking into account when computing for 'clone'.
Comment 5 zalan 2023-04-05 13:08:18 PDT
Created attachment 465782 [details]
screenshot with local fix

So it looks like content wrapping is correct (though I am going to double check it), we just miss the visual aspect of the inline end side of the padding. Chrome apparently let the inline box overflow the BFC root (it's very visible when you add outline on the block container on the mdn page).
Comment 6 zalan 2023-04-05 13:39:48 PDT
Created attachment 465784 [details]
[fast-cq]Patch
Comment 7 zalan 2023-04-05 15:58:12 PDT
>So it looks like content wrapping is correct (though I am going to double check it)
Not quite, but I am going to address that in a separate patch (will file and link a bug)
Comment 8 zalan 2023-04-05 16:39:08 PDT
(In reply to zalan from comment #7)
> >So it looks like content wrapping is correct (though I am going to double check it)
> Not quite, but I am going to address that in a separate patch (will file and
> link a bug)
bug 255065
Comment 9 EWS 2023-04-05 16:44:22 PDT
Committed 262644@main (8ed055f73871): <https://commits.webkit.org/262644@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 465784 [details].
Comment 10 zalan 2023-04-05 17:05:47 PDT
I guess the original bug report still depends on bug 255065 (flagged accordingly)
Comment 11 zalan 2023-04-05 19:28:04 PDT
Created attachment 465791 [details]
Screenshot after 262652@main

matching Firefox now.
Comment 12 Julian Teare 2023-04-29 13:12:22 PDT
Created attachment 466141 [details]
Screenshot showing the padding-right box-decoration-break clone is not working

The problem is that I have specified custom padding (padding:5px 15px) and -webkit-box-decoration-break: clone on spans in my webpages. Unfortunately, in the latest version of Safari (16.4.1 as of today 29 April), the right-hand side padding (i.e. 15px) is being removed. As an example, see screenshot attached. The page's URL is: https://www.conservatives.com/news/2023/budget23--your-priorities-are-our-priorities, however you can see this at smaller display resolutions across most of the pages on conservatives.com. It is a weird bug because I can't find a way of overriding the implementation of the span, and it only applies to the right-hand side of the spans.

Any help would be most welcome.

Thank you for taking the time to view my issue.
Comment 13 zalan 2023-04-29 13:52:50 PDT
(In reply to Julian Teare from comment #12)
> Created attachment 466141 [details]
> Screenshot showing the padding-right box-decoration-break clone is not
> working
> 
> The problem is that I have specified custom padding (padding:5px 15px) and
> -webkit-box-decoration-break: clone on spans in my webpages. Unfortunately,
> in the latest version of Safari (16.4.1 as of today 29 April), the
> right-hand side padding (i.e. 15px) is being removed. As an example, see
> screenshot attached. The page's URL is:
> https://www.conservatives.com/news/2023/budget23--your-priorities-are-our-
> priorities, however you can see this at smaller display resolutions across
> most of the pages on conservatives.com. It is a weird bug because I can't
> find a way of overriding the implementation of the span, and it only applies
> to the right-hand side of the spans.
> 
> Any help would be most welcome.
> 
> Thank you for taking the time to view my issue.
This is indeed broken. Thank your for reporting it. Since this bugzilla is already closed, I filed a new one to track it: bug 256135. I cc-ed you on it so that you'll get updates.(btw, it looks like the negative letter-spacing makes us stop applying the cloned padding.)
Comment 14 Julian Teare 2023-04-29 14:37:51 PDT
Hi @Zalan, many thanks for this prompt assistance. I am truly grateful. 

Best wishes, Julian
Comment 15 zalan 2023-04-29 15:15:39 PDT
(In reply to Julian Teare from comment #14)
> Hi @Zalan, many thanks for this prompt assistance. I am truly grateful. 
> 
> Best wishes, Julian
Julian, I have a candidate fix on this at bug 256135 (see attached screenshot). Will land it soon after getting an official review.