Bug 248022

Summary: Opacity transition is not smooth on rgba colors when they overflow scrolling container
Product: WebKit Reporter: Elijah Mooring <vehmloewff>
Component: CompositingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: dino, graouts, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Mac (Apple Silicon)   
OS: macOS 12   
Attachments:
Description Flags
HTML file containing bug reproduction
none
Clearer (to me) testcase none

Description Elijah Mooring 2022-11-16 21:39:47 PST 
Created attachment 463573 [details]
HTML file containing bug reproduction

Css opacity transition cracks when it is in a container container that scrolls. From what I have found, it needs at least one similar sibling. It also needs the color to be in the rgba format. For best visibility of the issue, use a low alpha value (eg. rgba(0, 0, 0, 0.05)).

This does not happen in chrome or firefox.

Attached is a simple reproduction in an html file.

Expected behavior is what happens in chrome: https://capture.dropbox.com/48pVCcQyXXdNZu07

Actual behavior: https://capture.dropbox.com/eukfc8i03jcMWgla

Tested On:
- Apple MacBook Air (M1, 2020)
- Safari Technology Preview: Release 158 (Safari 16.4, WebKit 17615.1.12.110.1)
Comment 1 Elijah Mooring 2022-11-16 21:51:31 PST 
It is possible to implement a workaround by wrapping the element that has the transition in container so that it has no siblings. In the case of the bug reproduction, that would mean wrapping each `.item` in an element.
Comment 2 Radar WebKit Bug Importer 2022-11-23 21:40:15 PST 
<rdar://problem/102638968>
Comment 3 Simon Fraser (smfr) 2022-11-28 16:12:51 PST 
Created attachment 463772 [details]
Clearer (to me) testcase

I think we fail to issue a repaint in the scroll layer's backing store.