RESOLVED MOVED 238088
REGRESSION (Safari 15.4): <button> loses background color with certain styles applied 
https://bugs.webkit.org/show_bug.cgi?id=238088
Summary REGRESSION (Safari 15.4): <button> loses background color with certain styles...
Jordan Pittman
Reported 2022-03-18 12:04:30 PDT
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)
Attachments
An HTML file that reproduces the bug (267 bytes, text/html)
2022-03-18 12:04 PDT, Jordan Pittman 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-03-18 17:07:58 PDT
<rdar://problem/90511187>
Jordan Pittman
Comment 2 2022-03-21 06:34:45 PDT
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.
jamauro
Comment 3 2022-03-22 22:25:02 PDT
Just ran into this. Thanks for posting. I thought I was losing my mind. :) Hope a patch can be released soon.
Simon Fraser (smfr)
Comment 4 2022-04-14 09:40:52 PDT
This is a bug in an underlying graphics framework, and will be tracked internally.
Simon Fraser (smfr)
Comment 5 2022-05-03 20:05:35 PDT
*** Bug 240045 has been marked as a duplicate of this bug. ***
Antoine Quint
Comment 6 2022-05-20 01:31:21 PDT
I believe this should be fixed in macOS 12.5 Seed 1 that was released this week.
Note You need to log in before you can comment on or make changes to this bug.