Bug 248022 - Opacity transition is not smooth on rgba colors when they overflow scrolling container
Summary: Opacity transition is not smooth on rgba colors when they overflow scrolling ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac (Apple Silicon) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-11-16 21:39 PST by Elijah Mooring
Modified: 2022-11-28 16:12 PST (History)
4 users (show)

See Also:

Attachments
HTML file containing bug reproduction (941 bytes, text/html)
2022-11-16 21:39 PST, Elijah Mooring 		no flags Details
Clearer (to me) testcase (984 bytes, text/html)
2022-11-28 16:12 PST, Simon Fraser (smfr) 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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.