Bug 238088 – REGRESSION (Safari 15.4): <button> loses background color with certain styles applied

• Component: Forms
• Status: RESOLVED MOVED

[Jordan Pittman]

Created attachment 455123 [details]
An HTML file that reproduces the bug

In Safari 15.4 on macOS and iOS 15.4 and all the way up to the latest webkit build archive (from an hour-ish ago) a `<button>` element will lose it's background under the following condition:

1. It has an opacity less than 1.0
2. It has a transparent border color (or something that resolves to transparent like rgb(0 0 0 / 0).
3. It has a flex, inline-flex, grid, or inline-grid display value.
4. It has a non-zero border radius.

This does *not* happen for `<div>` elements — just `<button>` as far as I can tell.

I tested this in Safari 15.3 on macOS and the styling works as expected. I've attached an HTML file that reproduces this bug.

My guess is it's caused by a commit somewhere between the tags Safari-612.4.9.1.8 and Safari-613.1.17.1.8 (I'm going off the tags on GitHub for that one)

[Radar WebKit Bug Importer]

<rdar://problem/90511187>

[Jordan Pittman]

Some more data points:

1. All four of the points outlined in the original report *must* be met to reproduce this bug. If you remove the rules for any one of them the background color shows up.
2. This appears to be a rendering issue because

- Selecting the text in the button draws the background behind the bounding box of the selected text
- If you select the text, click the button, and then deselect the text the background behind the whole button is left drawn but the background is empty around the bounding box of the previously selected portion of the text

3. Adding a width with a small fixed value that causes the text to wrap will then cause the background to show up again.

4. Adding width: some_percentage (e.g. width: 100%) causes the background to draw in the additional, non-intrinsic-sized portion of the bounding box + some amount. It appears to be taking into account the margin of the viewport body element and adding this to the bounding box where the background is invisible. There's also rather weird interaction when adding a large amount of padding. There still extra spacing on top of all this and I'm not entirely sure where it comes from.

Just ran into this. Thanks for posting. I thought I was losing my mind. :)

Hope a patch can be released soon.

[Simon Fraser (smfr)]

This is a bug in an underlying graphics framework, and will be tracked internally.

[Simon Fraser (smfr)]

*** Bug 240045 has been marked as a duplicate of this bug. ***

[Antoine Quint]

I believe this should be fixed in macOS 12.5 Seed 1 that was released this week.