[Webkit-unassigned] [Bug 236876] New: Text contents in <span> with opacity not repainting/updating when sibling element has "will-change: transform"

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Feb 18 19:22:05 PST 2022


https://bugs.webkit.org/show_bug.cgi?id=236876

            Bug ID: 236876
           Summary: Text contents in <span> with opacity not
                    repainting/updating when sibling element has
                    "will-change: transform"
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: All
                OS: All
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: long.zheng at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 452615

  --> https://bugs.webkit.org/attachment.cgi?id=452615&action=review

Demo of the repro

When working on a React application, I noticed that in Safari one of my <span> elements with some text content was not updating even though the underlying value in the DOM has changed. Upon extensive debugging and testing, I have deduced the problem occurs when
- the text <span> element has a CSS opacity value applied
- the sibling element has a CSS "will-change: transform" applied

Repro: 
- https://codesandbox.io/s/broken-feather-rl7u6b?file=/src/App.tsx
- Drag the input slider along the track
- The "Progress: 0" text should update/repaint as you drag the slider
- If you inspect the DOM, you can see the value and the node value does update
(See video attachment)

Actual behaviour:
- The text does not update/repaint
- The text updates/repaints if you mouse select the element

Expected behaviour:
- The text updates as you drag the slider

I have reproed this on
- Safari Version 15.3 (17612.4.9.1.8) on macOS 12.2.1
- Safari Technology Preview Release 140 (Safari 15.4, WebKit 17614.1.1.5) on macOS 12.2.1
- Safari on iOS 15.3.1

I cannot repro this issue on
- Chrome 98.0.4758.102 (Official Build) (arm64)
- Firefox 97.0 (64-bit)

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220219/056c08fe/attachment-0001.htm>


More information about the webkit-unassigned mailing list