Bug 239582

Summary:

REGRESSION (iOS 15.4): CSS transition flicker with transform and opacity

Product:

WebKit

Reporter:

cody zhao <codyzhao>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

graouts, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

iPhone / iPad

OS:

iOS 15

Attachments:

Description	Flags
This example was build from codesandbox.io, live demo: https://8zxpt5.csb.app/	none

Description cody zhao 2022-04-20 18:10:49 PDT

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.

Comment 1 Antoine Quint 2022-04-21 01:03:52 PDT

I expect this is a duplicate of bug 237972. Could you provide a testcase to confirm?

Comment 2 cody zhao 2022-04-21 15:17:33 PDT

Created attachment 458098 [details]
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.

Comment 3 cody zhao 2022-04-21 16:34:22 PDT

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!

Comment 4 cody zhao 2022-04-21 17:12:10 PDT

The same issue happens on desktop safari version 15.4 as well.

Comment 5 Ryan Haddad 2022-04-21 17:13:57 PDT

rdar://92079024

Comment 6 Antoine Quint 2022-04-22 02:42:12 PDT

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 ***