REGRESSION (Safari 16.4): "box-decoration-break: clone" with "padding-right" is missing padding space

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Scott Rod]

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

[Alexey Proskuryakov]

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.

[zalan]

Let me grab this. Thank you Alexey!

[Radar WebKit Bug Importer]

<rdar://problem/107668970>

[zalan]

This is about padding-right not taking into account when computing for 'clone'.

[zalan]

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).

[zalan]

Created attachment 465784 [details]
[fast-cq]Patch

[zalan]

>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)

[zalan]

(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

[EWS]

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].

[zalan]

I guess the original bug report still depends on bug 255065 (flagged accordingly)

[zalan]

Created attachment 465791 [details]
Screenshot after 262652@main

matching Firefox now.

[Julian Teare]

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.

[zalan]

(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.)

[Julian Teare]

Hi @Zalan, many thanks for this prompt assistance. I am truly grateful. 

Best wishes, Julian

[zalan]

(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.