Bug 240582 - REGRESSION (r292400): Animating and focusing a button inside of "overflow: clip" container causes button to disappear
Summary: REGRESSION (r292400): Animating and focusing a button inside of "overflow: cl...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2022-05-18 09:12 PDT by Liam DeBeasi
Modified: 2022-08-18 02:32 PDT (History)
8 users (show)

See Also:

Code reproduction (1.15 KB, text/html)
2022-05-18 09:12 PDT, Liam DeBeasi
no flags Details
Code reproduction (with div) (1.15 KB, text/html)
2022-05-18 09:50 PDT, Liam DeBeasi
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Liam DeBeasi 2022-05-18 09:12:28 PDT
Created attachment 459546 [details]
Code reproduction

Animating and then focusing a button inside of a contain: paint container causes the button to disappear.

Steps to reproduce:

1. Open the attached code reproduction in Safari (iOS or macOS).
2. Click the "Show Menu" button. Observe that a button translates in and then disappears.

Expected Behavior:

I expect the button to remain visible after the animation ends.

Actual Behavior:

The button disappears after the animation ends.

Additional Info:

- I can reproduce this on iOS 15.5 and Safari 15.5.
- This issue only reproduces when the document direction is RTL. LTR works as expected.
- This works as expected on Chrome and Firefox.

There are a couple things that fix the issue:
- Transforming the button using translateX instead of translate3d
- Focusing the button in a requestAnimationFrame
Comment 1 Simon Fraser (smfr) 2022-05-18 09:42:45 PDT
Same as bug 238088?
Comment 2 Liam DeBeasi 2022-05-18 09:50:47 PDT
Created attachment 459547 [details]
Code reproduction (with div)

This appears to be a different issue. The linked issue notes that the behavior only happens on <button> elements and does not happen on <div> elements. The issue reported here reproduces on both.

I attached a new code reproduction showing this. The steps to reproduce are the same.
Comment 3 Antoine Quint 2022-05-20 01:33:01 PDT
(In reply to Simon Fraser (smfr) from comment #1)
> Same as bug 238088?

I don't think so since that bug was fixed in macOS 12.5 but this bug reproduces in this build.
Comment 4 Radar WebKit Bug Importer 2022-05-25 09:13:14 PDT
Comment 5 zalan 2022-06-02 16:12:16 PDT
Changed the title as this bug repros with "overflow: clip". 
While it regressed at r292400, I think that change just surfaced some old repaint(overflow?) bug here.
Comment 6 Antti Koivisto 2022-08-18 02:32:07 PDT
This doesn't repro for me with trunk Webkit or the current iOS/Mac Safari betas.