diff --git a/test/click.spec.js b/test/click.spec.js
index 2dd4e1cb32..95731ab234 100644
--- a/test/click.spec.js
+++ b/test/click.spec.js
@@ -404,34 +404,48 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROMI
       expect(await page.evaluate('window.clicked')).toBe(true);
     });
     xit('should click on an animated button', async({page}) => {
-      const buttonSize = 50;
+      // This test exposes two issues:
+      // - Chromium headless does not issue rafs between first and second animateLeft() calls.
+      // - Chromium and WebKit keep element bounds the same when for 2 frames when changing left to a new value.
+      const buttonSize = 10;
       const containerWidth = 500;
-      const transition = 500;
+      const transition = 100;
       await page.setContent(`
-      <html>
-      <body>
-      <div style="border: 1px solid black; height: 50px; overflow: auto; width: ${containerWidth}px;">
-      <button id="button" style="height: ${buttonSize}px; width: ${buttonSize}px; transition: left ${transition}ms linear 0s; left: 0; position: relative" onClick="window.clicked++">hi</button>
-      </div>
-      </body>
-      <script>
-      const animateLeft = () => {
-        const button = document.querySelector('#button');
-        document.querySelector('#button').style.left = button.style.left === '0px' ? '${containerWidth - buttonSize}px' : '0px';
-      };
-      window.clicked = 0;
-      window.setTimeout(animateLeft, 0);
-      window.setInterval(animateLeft, ${transition});
-      </script>
-      </html>
+        <html>
+        <body>
+        <div style="border: 1px solid black; height: 50px; overflow: auto; width: ${containerWidth}px;">
+        <button style="border: none; height: ${buttonSize}px; width: ${buttonSize}px; transition: left ${transition}ms linear 0s; left: 0; position: relative" onClick="window.clicked++"></button>
+        </div>
+        </body>
+        <script>
+          window.atLeft = true;
+          const animateLeft = () => {
+            const button = document.querySelector('button');
+            button.style.left = window.atLeft ? '${containerWidth - buttonSize}px' : '0px';
+            console.log('set ' + button.style.left);
+            window.atLeft = !window.atLeft;
+          };
+          window.clicked = 0;
+          const dump = () => {
+            const button = document.querySelector('button');
+            const clientRect = button.getBoundingClientRect();
+            const rect = { x: clientRect.top, y: clientRect.left, width: clientRect.width, height: clientRect.height };
+            requestAnimationFrame(dump);
+          };
+          dump();
+        </script>
+        </html>
       `);
-      await page.click('button');
-      expect(await page.evaluate('window.clicked')).toBe(1);
-      expect(await page.evaluate('document.querySelector("#button").style.left')).toBe(`${containerWidth - buttonSize}px`);
-      await new Promise(resolve => setTimeout(resolve, 500));
-      await page.click('button');
-      expect(await page.evaluate('window.clicked')).toBe(2);
-      expect(await page.evaluate('document.querySelector("#button").style.left')).toBe('0px');
+      await page.evaluate(transition => {
+        window.setInterval(animateLeft, transition);
+        animateLeft();
+      }, transition);
+      const error1 = await page.click('button', { timeout: 250 }).catch(e => e);
+      expect(await page.evaluate('window.clicked')).toBe(0);
+      expect(error1.message).toContain('timeout 250ms exceeded');
+      const error2 = await page.click('button', { timeout: 250 }).catch(e => e);
+      expect(await page.evaluate('window.clicked')).toBe(0);
+      expect(error2.message).toContain('timeout 250ms exceeded');
     });
   });
 
