<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: ^1.29.1</li>
<li>Operating System: Windows11</li>
<li>Node.js Version: v19.0.1</li>
<li>Browser: Chromium</li>
</ul>
<p dir="auto"><strong>Code Snippet</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="test(&quot;repro&quot;, async ({ page, context }) =&gt; {
  await page.goto('http://localhost:8080');
  await page.locator('#theForceIsStrongWithThisOne').click({ timeout: 3000 });
});"><pre class="notranslate"><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">"repro"</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> page<span class="pl-kos">,</span> context <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">'http://localhost:8080'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'#theForceIsStrongWithThisOne'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">timeout</span>: <span class="pl-c1">3000</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>HTML:</strong></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;body id=&quot;divID&quot;&gt;
  &lt;div id=&quot;container&quot; class=&quot;container somethingPage&quot; style=&quot;height: auto;&quot;&gt;
    &lt;div class=&quot;banner&quot; id=&quot;pageBanner&quot;&gt;
      &lt;div id=&quot;bannerImageContainer&quot; class=&quot;bannerImageLeftAlign&quot; style=&quot;background: rgb(255, 255, 255);&quot;&gt;
        &lt;img id=&quot;headerImage&quot; src=&quot;./files/large-company-logo.png&quot;&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;main class=&quot;somethingInfo&quot;&gt;
      &lt;div class=&quot;documentTitle&quot; id=&quot;documentTitle&quot;&gt;
        &lt;div class=&quot;filterIconContainer&quot;&gt;
          &lt;span id=&quot;theForceIsStrongWithThisOne&quot; class=&quot;filter&quot;&gt;&lt;/span&gt; &lt;!-- This is the target --&gt;
        &lt;/div&gt;
        &lt;p id=&quot;somethingHeader&quot; class=&quot;&quot;&gt;&lt;b class=&quot;heading&quot;&gt;Keep On Darthin' In The Free World&lt;/b&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id=&quot;readOnlyWarning&quot;&gt;
        &lt;p&gt;&lt;b&gt;These are the blog articles you are looking for, if not, use the filter button above.&lt;/b&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/div&gt;
&lt;/body&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">container</span>" <span class="pl-c1">class</span>="<span class="pl-s">container somethingPage</span>" <span class="pl-c1">style</span>="<span class="pl-s">height: auto;</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">banner</span>" <span class="pl-c1">id</span>="<span class="pl-s">pageBanner</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">bannerImageContainer</span>" <span class="pl-c1">class</span>="<span class="pl-s">bannerImageLeftAlign</span>" <span class="pl-c1">style</span>="<span class="pl-s">background: rgb(255, 255, 255);</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">id</span>="<span class="pl-s">headerImage</span>" <span class="pl-c1">src</span>="<span class="pl-s">./files/large-company-logo.png</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">main</span> <span class="pl-c1">class</span>="<span class="pl-s">somethingInfo</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">documentTitle</span>" <span class="pl-c1">id</span>="<span class="pl-s">documentTitle</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">filterIconContainer</span>"<span class="pl-kos">&gt;</span>
          <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">id</span>="<span class="pl-s">theForceIsStrongWithThisOne</span>" <span class="pl-c1">class</span>="<span class="pl-s">filter</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span> <span class="pl-c">&lt;!-- This is the target --&gt;</span>
        <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">p</span> <span class="pl-c1">id</span>="<span class="pl-s">somethingHeader</span>" <span class="pl-c1">class</span>=""<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">b</span> <span class="pl-c1">class</span>="<span class="pl-s">heading</span>"<span class="pl-kos">&gt;</span>Keep On Darthin' In The Free World<span class="pl-kos">&lt;/</span><span class="pl-ent">b</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">readOnlyWarning</span>"<span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">b</span><span class="pl-kos">&gt;</span>These are the blog articles you are looking for, if not, use the filter button above.<span class="pl-kos">&lt;/</span><span class="pl-ent">b</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">main</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I also note that there is CSS for the "filter" class:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".filter:after {
    position: absolute;
    border-left: .25em solid;
    left: -.125em;
    top: -.2em;
    height: .4em;
    content: ' '
}"><pre class="notranslate">.filter:after {
    position: absolute;
    border-left: .25em solid;
    left: -.125em;
    top: -.2em;
    height: .4em;
    content: ' '
}</pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">When running this (only) in Chromium, as you will see in the trace below, while playwright correctly highlights the filter control, it is going to perform the click elsewhere and so the error that is returned makes sense "&lt;/body&gt; intercepts pointer events"<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/16937257/210839453-2809d992-cc51-4bbf-a684-291c0eea82a2.png"><img src="https://user-images.githubusercontent.com/16937257/210839453-2809d992-cc51-4bbf-a684-291c0eea82a2.png" alt="image" style="max-width: 100%;"></a><br>
I have a feeling this is probably not playwright and more likely chromium itself but this is somewhat further than I know to go in the code to really get to the bottom of it.</p>
<details>
<summary>Click here for the log produced:</summary>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="waiting for locator('#theForceIsStrongWithThisOne')
locator resolved to visible &lt;span class=&quot;filter&quot; id=&quot;theForceIsStrongWithThisOne&quot;&gt;&lt;/span&gt;
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
&lt;body id=&quot;divID&quot;&gt;…&lt;/body&gt; intercepts pointer events
retrying click action, attempt #1
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
&lt;body id=&quot;divID&quot;&gt;…&lt;/body&gt; intercepts pointer events
retrying click action, attempt #2
waiting 20ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
&lt;body id=&quot;divID&quot;&gt;…&lt;/body&gt; intercepts pointer events
retrying click action, attempt #3
waiting 100ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
&lt;body id=&quot;divID&quot;&gt;…&lt;/body&gt; intercepts pointer events
retrying click action, attempt #4
waiting 100ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
&lt;body id=&quot;divID&quot;&gt;…&lt;/body&gt; intercepts pointer events
retrying click action, attempt #5
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
&lt;body id=&quot;divID&quot;&gt;…&lt;/body&gt; intercepts pointer events
retrying click action, attempt #6
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
&lt;body id=&quot;divID&quot;&gt;…&lt;/body&gt; intercepts pointer events
retrying click action, attempt #7
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
&lt;body id=&quot;divID&quot;&gt;…&lt;/body&gt; intercepts pointer events
retrying click action, attempt #8
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
&lt;body id=&quot;divID&quot;&gt;…&lt;/body&gt; intercepts pointer events
retrying click action, attempt #9
waiting 500ms"><pre class="notranslate">waiting for locator('#theForceIsStrongWithThisOne')
locator resolved to visible <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">filter</span>" <span class="pl-c1">id</span>="<span class="pl-s">theForceIsStrongWithThisOne</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>…<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span> intercepts pointer events
retrying click action, attempt #1
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>…<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span> intercepts pointer events
retrying click action, attempt #2
waiting 20ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>…<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span> intercepts pointer events
retrying click action, attempt #3
waiting 100ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>…<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span> intercepts pointer events
retrying click action, attempt #4
waiting 100ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>…<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span> intercepts pointer events
retrying click action, attempt #5
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>…<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span> intercepts pointer events
retrying click action, attempt #6
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>…<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span> intercepts pointer events
retrying click action, attempt #7
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>…<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span> intercepts pointer events
retrying click action, attempt #8
waiting 500ms
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span> <span class="pl-c1">id</span>="<span class="pl-s">divID</span>"<span class="pl-kos">&gt;</span>…<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span> intercepts pointer events
retrying click action, attempt #9
waiting 500ms</pre></div>
</details>
<p dir="auto">Here is the output from the console:</p>
<div class="highlight highlight-text-shell-session notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  3 | test(&quot;repro&quot;, async ({ page, context }) =&gt; {
  4 |   await page.goto(&quot;http://localhost:8080&quot;);
&gt; 5 |   await page.locator(&quot;#theForceIsStrongWithThisOne&quot;).click({ timeout: 3000 });
    |                                                      ^
  6 | });

  at c:\Users\DannyCrone\repos\click-repro\tests\repro.spec.ts:5:54"><pre class="notranslate"><span class="pl-c1">  3 | test("repro", async ({ page, context }) =&gt; {</span>
<span class="pl-c1">  4 |   await page.goto("http://localhost:8080");</span>
&gt; <span class="pl-s1">5 <span class="pl-k">|</span>   await page.locator(<span class="pl-s"><span class="pl-pds">"</span>#theForceIsStrongWithThisOne<span class="pl-pds">"</span></span>).click({ timeout: 3000 })<span class="pl-k">;</span></span>
<span class="pl-c1">    |                                                      ^</span>
<span class="pl-c1">  6 | });</span>

<span class="pl-c1">  at c:\Users\DannyCrone\repos\click-repro\tests\repro.spec.ts:5:54</span></pre></div>
<p dir="auto"><a href="https://github.com/microsoft/playwright/files/10354212/click-repro.zip">click-repro.zip</a></p>
<p dir="auto">This project contains a repro website to test against and 1 test</p>
<ul dir="auto">
<li>website is in the folder "website"</li>
<li>test is called "repro" in "repro.spec.ts"</li>
</ul>
<p dir="auto">In order to run the website so it renders the page correctly, I used http-server using the following command:</p>
<div class="highlight highlight-text-shell-session notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="http-server website -c-1"><pre class="notranslate"><span class="pl-c1">http-server website -c-1</span></pre></div>
<p dir="auto">Also included it as an npm script:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;http-server website -c-1&quot;
  },"><pre class="notranslate">  <span class="pl-ent">"scripts"</span>: {
    <span class="pl-ent">"start"</span>: <span class="pl-s"><span class="pl-pds">"</span>http-server website -c-1<span class="pl-pds">"</span></span>
  },</pre></div>
<p dir="auto">Attached are the traces from chromium (failing) and webkit (passing):<br>
<a href="https://github.com/microsoft/playwright/files/10354167/chromiumtrace.zip">chromiumtrace.zip</a><br>
<a href="https://github.com/microsoft/playwright/files/10354168/webkittrace.zip">webkittrace.zip</a></p>
<h3 dir="auto">Your question</h3>
<p dir="auto">On a specific website playwright doesn't seem to find the location of elements accurately:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23338650/125783337-ed62a618-acbf-46e4-8e28-8f4eb75ae4e5.png"><img src="https://user-images.githubusercontent.com/23338650/125783337-ed62a618-acbf-46e4-8e28-8f4eb75ae4e5.png" alt="issue1" style="max-width: 100%;"></a></p>
<p dir="auto">In the above image I'm hovering over the button in the browser opened by codegen. The highlighted area does not match the element position, as seen on the screen or when hovering over the element definition in the Developer Tools:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23338650/125784412-29fabd3b-7615-4f57-9996-0df764fbb44b.png"><img src="https://user-images.githubusercontent.com/23338650/125784412-29fabd3b-7615-4f57-9996-0df764fbb44b.png" alt="issue2" style="max-width: 100%;"></a></p>
<p dir="auto">This behavior is causing some issues, with functions like elementHandle.screenshot() and page.click(). This issue happens on all elements on this page and scrolling on the page seems to affect the location determined by playwright relative to the actual location of the element. I'm looking for some insight into how this issue could be fixed or why is it occurring.</p>
<p dir="auto">Website I'm talking about: <a href="https://factura.vodafone.ro/" rel="nofollow">https://factura.vodafone.ro/</a></p>