Bug 301462 – REGRESSION (Safari 26, 292627@main): Translate on semi transparent background sometimes makes background darker

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Valerii]

Created attachment 477197 [details]
video of bug

Given https://codepen.io/balepas/pen/ogbyvxW

```html
<h1>Hover me</h1>
```

```css
body {
  background: rgba(0 0 0 / 50%);
}

h1:hover {
  transform: translateY(10px);
  transition: transform 10s ease;
  background: transparent;
}
``` 

When you hover over an h1 element, the background color underneath it remains the same, but the page background color may become darker, as if two semi transparent backgrounds were underneath each other.

Bug is reproduced in Safari 26.0.1 and Safari TP Release 230 (WebKit 20623.1.11.19.3)

[Alexey Proskuryakov]

Thank you for the report, I can reproduce this. Not sure what's different between attempts when it happens, and those when it does not.

Does not reproduce: Safari 18.6 on macOS Sequoia 15.6
Reproduces: STP 223 on macOS Sequoia 15.6

[Radar WebKit Bug Importer]

<rdar://problem/163509267>

[Simon Fraser (smfr)]

We must be painting the body background twice.

[Nathan Solomon]

Pull request: https://github.com/WebKit/WebKit/pull/56166

[EWS]

Committed 305492@main (366280b0f896): <https://commits.webkit.org/305492@main>

Reviewed commits have been landed. Closing PR #56166 and removing active labels.