[MDC-RIPPLE] Ripple fires twice if page is zoomed in

[MaximBalaganskiy]

Bug report

Ripple is rendered incorrectly on iOS devices
Original closed issue #7207.

Steps to reproduce

1. Go to https://material.io/components/buttons#interactive-demo
2. 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 #6357.
The issue does not manifest in safari.
Happens to any ripple, not just buttons.

[joyzhong]

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