Bug

Status Update

No update yet.

Description

ch...@google.com

created issue on behalf of an...@datadoghq.com #1

Mar 3, 2025 09:53AM

Steps to reproduce the problem

Run puppeteer script OR
Open simple html page from puppeteer script

enabled devtools
toggle device toolbar
choose device of the resolution 320x550 (important: the width must be smaller than the page width)
make sure touch is enabled (important)
scroll to the button and click it - Check the console for incorrect button positioning.

import * as puppeteer from 'puppeteer-core'
(async () => {
      const browser = await puppeteer.launch({
        defaultViewport: {
          height: 550,
          isMobile: true,
          width: 320,
        },    
        executablePath: 
        "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
      });
      const page = (await browser.pages())[0]
      page.on('console', msg => console.log(msg.text()));

    await page.setContent(`
      <html>
      <head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
      </head>
      <body>
          <div style="padding: 500px; background-color: black;"></div>
          <button style="margin: 20px;">Click Me!</button>
      </body>
      <script>
          const button = document.querySelector('button');
          button.addEventListener('click', () => {
              const rect = document.querySelector('button').getBoundingClientRect()
              console.log('>>> Button clicked [top:', rect.top, 'bottom:', rect.bottom);
          });
      </script>
      </html>
    `);

      const btn = await page.waitForSelector("button")
      await btn.evaluate((e) => e.scrollIntoView({behavior: 'auto', block: 'center'}))
      await btn.click();  
  
      await page.close()
      await browser.close();
    }
)();

Problem Description

While using Puppeteer, I noticed that clicks are sometimes missed when isMobile: true (which enables touch). Setting it to false fixes the issue. After investigating, I found that Puppeteer uses getBoundingClientRect() to determine the click position. This function seems to return incorrect values when the page contains content wider than the viewport and touch is enabled.

Summary

getBoundingClientRect() returns incorrect values when touch enabled

Additional Data

Category: JavaScript
Chrome Channel: Stable
Regression: N/A

variations.txt

40 KB

View

Download

Comments

ys...@chromium.org <ys...@chromium.org> #2Mar 4, 2025 06:04AM

Any updates on this? It's been a month already since I reported it, and it seems this crash is occurring quite frequently for my users.

IssueTracker

This issue is a part of the Chromium tracker.

getBoundingClientRect() returns incorrect values when touch enabled

Status Update

Description

Steps to reproduce the problem

Problem Description

Summary

Additional Data

Comments

ys...@chromium.org <ys...@chromium.org> #2Mar 4, 2025 06:04AM

Issue 400119367

Description

Steps to reproduce the problem

Problem Description

Summary

Additional Data

Issue summary

Comments

ys...@chromium.org <ys...@chromium.org> #2Mar 4, 2025 06:04AM

Add comment

Issue metadata