238088 2022-03-18 12:04:30 -0700 REGRESSION (Safari 15.4): <button> loses background color with certain styles applied 2022-05-20 01:31:21 -0700 1 1 1 Unclassified WebKit Forms Safari 15 Mac (Apple Silicon) macOS 12 RESOLVED MOVED InRadar P2 Normal --- 1 jordan webkit-unassigned akeerthi cdumez graouts gregsimon jamauro koivisto lets.email.rob rik simon.fraser tomlongmate webkit-bug-importer wenson_hsieh oldest_to_newest 1852794 0 455123 jordan 2022-03-18 12:04:30 -0700 Created attachment 455123 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) 1852893 1 webkit-bug-importer 2022-03-18 17:07:58 -0700 <rdar://problem/90511187> 1853172 2 jordan 2022-03-21 06:34:45 -0700 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. 1854054 3 jamauro 2022-03-22 22:25:02 -0700 Just ran into this. Thanks for posting. I thought I was losing my mind. :) Hope a patch can be released soon. 1861539 4 simon.fraser 2022-04-14 09:40:52 -0700 This is a bug in an underlying graphics framework, and will be tracked internally. 1866358 5 simon.fraser 2022-05-03 20:05:35 -0700 *** Bug 240045 has been marked as a duplicate of this bug. *** 1870654 6 graouts 2022-05-20 01:31:21 -0700 I believe this should be fixed in macOS 12.5 Seed 1 that was released this week. 455123 2022-03-18 12:04:30 -0700 2022-03-18 12:04:30 -0700 An HTML file that reproduces the bug button-background-bug.html text/html 267 jordan PCFkb2N0eXBlIGh0bWw+CjxodG1sPgo8Ym9keT4KICA8YnV0dG9uCiAgICBzdHlsZT0iCiAgICAg IGJhY2tncm91bmQtY29sb3I6IHJlZDsKICAgICAgYm9yZGVyLXJhZGl1czogMC4zNzVyZW07CiAg ICAgIG9wYWNpdHk6IDAuOTsKICAgICAgZGlzcGxheTogZmxleDsKICAgICAgYm9yZGVyLWNvbG9y OiB0cmFuc3BhcmVudDsKICAgICIKICA+CiAgICBUaGlzIGhhcyBubyBiYWNrZ3JvdW5kIGNvbG9y IGJ1dCBzaG91bGQKICA8L2J1dHRvbj4KPC9ib2R5Pgo8L2h0bWw+