240653 2022-05-19 08:10:42 -0700 [iOS] opacity animation changes computed font-size 2026-01-12 09:05:11 -0800 1 1 1 Unclassified WebKit Animations Safari 15 iPhone / iPad iOS 15 NEW HTML5, InRadar P2 Critical --- 1 mauricio webkit-unassigned dino graouts mmaxfield webkit-bug-importer zalan oldest_to_newest 1870378 0 mauricio 2022-05-19 08:10:42 -0700 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> 1870394 1 gsnedders 2022-05-19 08:45:30 -0700 I feel like I've seen this bug recently, but I can't find any duplicate, Antoine? 1870396 2 graouts 2022-05-19 08:47:34 -0700 Does not ring a bell! 1872014 3 webkit-bug-importer 2022-05-26 08:11:12 -0700 <rdar://problem/93970773>