239582 2022-04-20 18:10:49 -0700 REGRESSION (iOS 15.4): CSS transition flicker with transform and opacity 2022-04-22 02:42:12 -0700 1 1 1 Unclassified WebKit CSS Safari 15 iPhone / iPad iOS 15 RESOLVED DUPLICATE 237972 InRadar P2 Normal --- 1 codyzhao webkit-unassigned graouts webkit-bug-importer oldest_to_newest 1863154 0 codyzhao 2022-04-20 18:10:49 -0700 Safari (iOs 15.4.1) has troubles displaying CSS transitions with transform and opacity when only one transition delay given for the two, like `transition: opacity 400ms ease-in 50ms, transform 600ms ease-in`. Adding transition delay of 1ms to transform stop the flicker. e.g. `transition: opacity 400ms ease-in 50ms, transform 600ms ease-in 1ms` This bug didn't exist for earlier iOs versions. 1863221 1 graouts 2022-04-21 01:03:52 -0700 I expect this is a duplicate of bug 237972. Could you provide a testcase to confirm? 1863430 2 458098 codyzhao 2022-04-21 15:17:33 -0700 Created attachment 458098 This example was build from codesandbox.io, live demo: https://8zxpt5.csb.app/ Try https://8zxpt5.csb.app/ in IOS 15.4 safari by clicking the button. You will see the animation flicker issue. 1863468 3 codyzhao 2022-04-21 16:34:22 -0700 I just had a look at bug 237972. It seems to be the same issue. Bug 237972 has been marked resolved, but we are still experience the same issue on IOS 15.4 safari. I can also confirm that https://ahumanfuture.co/ still flashes from IOS 15.4 safari. So this bug will be fixed in next IOS minor release? Thanks! 1863487 4 codyzhao 2022-04-21 17:12:10 -0700 The same issue happens on desktop safari version 15.4 as well. 1863489 5 ryanhaddad 2022-04-21 17:13:57 -0700 rdar://92079024 1863584 6 graouts 2022-04-22 02:42:12 -0700 Sorry, but I cannot comment on when a fix for this will make it into a publicly available build. This is indeed fixed by bug 237972. *** This bug has been marked as a duplicate of bug 237972 *** 458098 2022-04-21 15:17:33 -0700 2022-04-21 15:17:33 -0700 This example was build from codesandbox.io, live demo: https://8zxpt5.csb.app/ 8zxpt5.zip text/html 2480 codyzhao UEsDBAoAAAAAAMqxlVTTGtvyTgEAAE4BAAAKAAAAaW5kZXguaHRtbDwhRE9DVFlQRSBodG1sPgo8 aHRtbD4KICA8aGVhZD4KICAgIDx0aXRsZT5QYXJjZWwgU2FuZGJveDwvdGl0bGU+CiAgICA8bWV0 YSBjaGFyc2V0PSJVVEYtOCIgLz4KICA8L2hlYWQ+CgogIDxib2R5PgogICAgPGRpdj48YnV0dG9u IGlkPSJidG4iPkNsaWNrIG1lITwvYnV0dG9uPjwvZGl2PgogICAgPGJyIC8+CiAgICA8ZGl2IGlk PSJhcHAiPgogICAgICA8ZGl2IGlkPSJlMSIgY2xhc3M9ImhpZGRlbiI+PC9kaXY+CiAgICAgIDxk aXYgaWQ9ImUyIj48L2Rpdj4KICAgIDwvZGl2PgoKICAgIDxzY3JpcHQgc3JjPSJzcmMvaW5kZXgu anMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPgpQSwMECgAAAAAAyrGVVPnDqLXIAQAAyAEA AAwAAABwYWNrYWdlLmpzb257CiAgIm5hbWUiOiAidmFuaWxsYSIsCiAgInZlcnNpb24iOiAiMS4w LjAiLAogICJkZXNjcmlwdGlvbiI6ICJKYXZhU2NyaXB0IGV4YW1wbGUgc3RhcnRlciBwcm9qZWN0 IiwKICAibWFpbiI6ICJpbmRleC5odG1sIiwKICAic2NyaXB0cyI6IHsKICAgICJzdGFydCI6ICJw YXJjZWwgaW5kZXguaHRtbCAtLW9wZW4iLAogICAgImJ1aWxkIjogInBhcmNlbCBidWlsZCBpbmRl eC5odG1sIgogIH0sCiAgImRlcGVuZGVuY2llcyI6IHsgInBhcmNlbC1idW5kbGVyIjogIl4xLjYu MSIgfSwKICAiZGV2RGVwZW5kZW5jaWVzIjogewogICAgIkBiYWJlbC9jb3JlIjogIjcuMi4wIiwK ICAgICJ0eXBlc2NyaXB0IjogIjQuNC40IgogIH0sCiAgInJlc29sdXRpb25zIjogewogICAgIkBi YWJlbC9wcmVzZXQtZW52IjogIjcuMTMuOCIKICB9LAogICJrZXl3b3JkcyI6IFsiamF2YXNjcmlw dCIsICJzdGFydGVyIl0KfQpQSwMECgAAAAAAyrGVVAAAAAAAAAAAAAAAAAQAAABzcmMvUEsDBAoA AAAAAMqxlVR5cZzmjQEAAI0BAAAMAAAAc3JjL2luZGV4LmpzaW1wb3J0ICIuL3N0eWxlcy5jc3Mi OwoKY29uc3QgZTEgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgiZTEiKTsKY29uc3QgZTIgPSBk b2N1bWVudC5nZXRFbGVtZW50QnlJZCgiZTIiKTsKCmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJi dG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uIChlKSB7CiAgZS5wcmV2ZW50 RGVmYXVsdCgpOwogIGlmIChlMS5jbGFzc0xpc3QuY29udGFpbnMoImhpZGRlbiIpKSB7CiAgICBl MS5jbGFzc0xpc3QucmVtb3ZlKCJoaWRkZW4iKTsKICAgIGUyLmNsYXNzTGlzdC5hZGQoImhpZGRl biIpOwogIH0gZWxzZSB7CiAgICBlMS5jbGFzc0xpc3QuYWRkKCJoaWRkZW4iKTsKICAgIGUyLmNs YXNzTGlzdC5yZW1vdmUoImhpZGRlbiIpOwogIH0KfSk7ClBLAwQKAAAAAADKsZVUJhPfQVEBAABR AQAADgAAAHNyYy9zdHlsZXMuY3NzYm9keSB7CiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7Cn0K CiNhcHAgewogIGRpc3BsYXk6IGZsZXg7Cn0KCiNlMSwKI2UyIHsKICB3aWR0aDogMjAwcHg7CiAg aGVpZ2h0OiAyMDBweDsKICB0cmFuc2Zvcm06IHNjYWxlKDEpOwogIHRyYW5zaXRpb246IHRyYW5z Zm9ybSAyMDBtcyBlYXNlLWluLCBvcGFjaXR5IDIwMG1zIGVhc2UtaW4gNTBtczsKfQoKI2UxIHsK ICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7Cn0KCiNlMiB7CiAgYmFja2dyb3VuZC1jb2xvcjogZ3Jl ZW47Cn0KCiNlMS5oaWRkZW4sCiNlMi5oaWRkZW4gewogIG9wYWNpdHk6IDA7CiAgdHJhbnNmb3Jt OiBzY2FsZSgwLjkpOwp9ClBLAwQKAAAAAADKsZVUAAAAAAAAAAAAAAAADQAAAC5jb2Rlc2FuZGJv eC9QSwMECgAAAAAAyrGVVJRxipDaAAAA2gAAABsAAAAuY29kZXNhbmRib3gvd29ya3NwYWNlLmpz b257CiAgInJlc3BvbnNpdmUtcHJldmlldyI6IHsKICAgICJNb2JpbGUiOiBbCiAgICAgIDMyMCwK ICAgICAgNjc1CiAgICBdLAogICAgIlRhYmxldCI6IFsKICAgICAgMTAyNCwKICAgICAgNzY1CiAg ICBdLAogICAgIkRlc2t0b3AiOiBbCiAgICAgIDE0MDAsCiAgICAgIDgwMAogICAgXSwKICAgICJE ZXNrdG9wICBIRCI6IFsKICAgICAgMTkyMCwKICAgICAgMTA4MAogICAgXQogIH0KfVBLAQIUAAoA AAAAAMqxlVTTGtvyTgEAAE4BAAAKAAAAAAAAAAAAAAAAAAAAAABpbmRleC5odG1sUEsBAhQACgAA AAAAyrGVVPnDqLXIAQAAyAEAAAwAAAAAAAAAAAAAAAAAdgEAAHBhY2thZ2UuanNvblBLAQIUAAoA AAAAAMqxlVQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAEAAAAGgDAABzcmMvUEsBAhQACgAAAAAAyrGV VHlxnOaNAQAAjQEAAAwAAAAAAAAAAAAAAAAAigMAAHNyYy9pbmRleC5qc1BLAQIUAAoAAAAAAMqx lVQmE99BUQEAAFEBAAAOAAAAAAAAAAAAAAAAAEEFAABzcmMvc3R5bGVzLmNzc1BLAQIUAAoAAAAA AMqxlVQAAAAAAAAAAAAAAAANAAAAAAAAAAAAEAAAAL4GAAAuY29kZXNhbmRib3gvUEsBAhQACgAA AAAAyrGVVJRxipDaAAAA2gAAABsAAAAAAAAAAAAAAAAA6QYAAC5jb2Rlc2FuZGJveC93b3Jrc3Bh Y2UuanNvblBLBQYAAAAABwAHAJ4BAAD8BwAAAAA=