material-components
[MDC-RIPPLE] Ripple fires twice if page is zoomed in
Bug report
Ripple is rendered incorrectly on iOS devices Original closed issue #7207.
Steps to reproduce
- Go to https://material.io/components/buttons#interactive-demo
- Click on the button
Actual behavior
The ripple is rendered in two places
Expected behavior
The ripple expands from a single point
Screenshots
Your Environment:
| Software | Version(s) |
|---|---|
| Browser | Chrome |
| Operating System | iOS |
Additional context
Might be related to https://github.com/material-components/material-components-web/issues/6357. The issue does not manifest in safari. Happens to any ripple, not just buttons.
Verified that this is reproducible on Chrome/iOS but not Safari/iOS or other platforms (Chrome/MacOS, Firefox).
I was able to create a minimal reproduction in https://codepen.io/joyzhong/pen/JjyQZXR - this seems like a Chrome/iOS bug where, when animating an element, the element first takes on the original position rather than the position defined in the from clause of a keyframe animation. I've filed https://bugs.webkit.org/show_bug.cgi?id=233479 on Webkit.
Unclear if there's a workaround in the meantime (setting an inline style transform: translate(100px,100px) on the circle element when adding the animate class did not work).
