NEW 240653
[iOS] opacity animation changes computed font-size 
https://bugs.webkit.org/show_bug.cgi?id=240653
Summary [iOS] opacity animation changes computed font-size
Mauricio
Reported 2022-05-19 08:10:42 PDT
Safari iOS has a bug that will make a `font-size` property scale up consistently in the presence of an opacity animation. The computed value diverges from the set CSS value. But even without a set CSS value, you can see how the text jumps, speak the `font-size` grows at the end of the animation. To reproduce the bug, you need a parent DOM element containing a unit width or height + `overflow: hidden. At the same time, you require at least two `<p>`. And last a DOM element with `opacity: 0` will be set to 1 through JavaScript (See the HTML example below). You can see a live demo in this CodeSandbox. https://8d838r.csb.app/ This is a minimal representation of the bug. <!DOCTYPE html> <head> <style> .container { overflow: hidden; width: 100%; height: 2000px; background: yellow; } .transition { opacity: 0; background: red; width: 9px; height: 9px; will-change: transform; z-index: 2; } </style> </head> <body> <div class="container"> <p>XXX</p> <p>XXX</p> <p>XXX</p> <p>XXX</p> <div id="ani" class="transition"></div> </div> <script> setTimeout(() => { document.getElementById("ani").style.opacity = 1; }, 2000); </script> </body>
Attachments
Add attachment proposed patch, testcase, etc.
Sam Sneddon [:gsnedders]
Comment 1 2022-05-19 08:45:30 PDT
I feel like I've seen this bug recently, but I can't find any duplicate, Antoine?
Antoine Quint
Comment 2 2022-05-19 08:47:34 PDT
Does not ring a bell!
Radar WebKit Bug Importer
Comment 3 2022-05-26 08:11:12 PDT
<rdar://problem/93970773>
Note You need to log in before you can comment on or make changes to this bug.