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>
I feel like I've seen this bug recently, but I can't find any duplicate, Antoine?
Does not ring a bell!
<rdar://problem/93970773>