Bug 240582 – REGRESSION (r292400): Animating and focusing a button inside of "overflow: clip" container causes button to disappear

• Component: Layout and Rendering
• Status: RESOLVED CONFIGURATION CHANGED

[Liam DeBeasi]

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

[Simon Fraser (smfr)]

Same as bug 238088?

[Liam DeBeasi]

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.

[Antoine Quint]

(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.

[Radar WebKit Bug Importer]

<rdar://problem/93905731>

[zalan]

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.

[Antti Koivisto]

This doesn't repro for me with trunk Webkit or the current iOS/Mac Safari betas.