NEW 248022
Opacity transition is not smooth on rgba colors when they overflow scrolling container 
https://bugs.webkit.org/show_bug.cgi?id=248022
Summary Opacity transition is not smooth on rgba colors when they overflow scrolling ...
Elijah Mooring
Reported 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)
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 attachment proposed patch, testcase, etc.
Elijah Mooring
Comment 1 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.
Radar WebKit Bug Importer
Comment 2 2022-11-23 21:40:15 PST
<rdar://problem/102638968>
Simon Fraser (smfr)
Comment 3 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.
Note You need to log in before you can comment on or make changes to this bug.