<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.4.2</li>
<li>Operating System: Mac</li>
<li>Node.js version: 12</li>
<li>Browser: Chromium</li>
<li>Extra: NA</li>
</ul>
<p dir="auto"><strong>Describe the bug</strong><br>
<code class="notranslate">elementHandle.scrollIntoViewIfNeeded</code> won't scroll if the element is partially visible. I think this might be unexpected behavior but I don't see any details about this method on <a href="https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-scrollIntoViewIfNeeded" rel="nofollow">CDP</a>.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="2020-10-14T02:00:16.457Z pw:api =&gt; elementHandle.scrollIntoViewIfNeeded started
2020-10-14T02:00:16.458Z pw:api   waiting for element to be visible and not moving
2020-10-14T02:00:16.481Z pw:api   element is visible and does not move
2020-10-14T02:00:16.482Z pw:api &lt;= elementHandle.scrollIntoViewIfNeeded succeeded"><pre class="notranslate"><code class="notranslate">2020-10-14T02:00:16.457Z pw:api =&gt; elementHandle.scrollIntoViewIfNeeded started
2020-10-14T02:00:16.458Z pw:api   waiting for element to be visible and not moving
2020-10-14T02:00:16.481Z pw:api   element is visible and does not move
2020-10-14T02:00:16.482Z pw:api &lt;= elementHandle.scrollIntoViewIfNeeded succeeded
</code></pre></div>
<p dir="auto">Here's the page with selected element that I am trying to scroll into view</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1330677/95935547-55bb8c80-0d88-11eb-80ee-1e2345671650.png"><img width="1358" alt="Screen Shot 2020-10-13 at 7 12 35 PM" src="https://user-images.githubusercontent.com/1330677/95935547-55bb8c80-0d88-11eb-80ee-1e2345671650.png" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.2.1</li>
<li>Operating System: Ubuntu Bionic (docker image)</li>
<li>Node version: 12.18.0 (ubuntu) / 12.16.2 (win)</li>
<li>Browser: HeadlessChrome/85.0.4182.0 (ubuntu)</li>
</ul>
<p dir="auto">Hello, guys.<br>
I am working on puppeteer -&gt; playwright migration and faced an issue that did not happen with puppeteer, but happens with playwright for some reason.</p>
<p dir="auto">I have a list of items, one of them is partially visible. Header overlaps it. I pointed my mouse over it and it's highlighted at the moment:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/26511191/88268514-45d96280-ccdb-11ea-9ff1-97f219105f15.png"><img src="https://user-images.githubusercontent.com/26511191/88268514-45d96280-ccdb-11ea-9ff1-97f219105f15.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I use simple click with the only one parameter click count = 1. No other flags are set.</p>
<p dir="auto">According to <a href="https://playwright.dev/#version=v1.2.1&amp;path=docs%2Fapi.md&amp;q=pageclickselector-options" rel="nofollow">this doc</a>:<br>
position  A point to click relative to the top-left corner of element padding box. <em>If not specified, clicks to some visible point of the element.</em></p><p dir="auto"></p>
<p dir="auto">PW should click to some visible point of the element. But it does not happen:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Timeout 30000ms exceeded during page.click.
===================== page.click logs =====================
[api] waiting for selector &quot;[data-test-id^=&quot;Nav.Country.222&quot;]&quot;
[api]   selector resolved to visible &lt;div tabindex=&quot;0&quot; role=&quot;button&quot; aria-disabled=&quot;false&quot;…&gt;…&lt;/div&gt;
[api] attempting page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action"><pre class="notranslate"><code class="notranslate">Timeout 30000ms exceeded during page.click.
===================== page.click logs =====================
[api] waiting for selector "[data-test-id^="Nav.Country.222"]"
[api]   selector resolved to visible &lt;div tabindex="0" role="button" aria-disabled="false"…&gt;…&lt;/div&gt;
[api] attempting page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
[api]   waiting for element to be visible, enabled and not moving
[api]   element is visible, enabled and does not move
[api]   scrolling into view if needed
[api]   done scrolling
[api]   checking that element receives pointer events at (149.5,187)
[api]   element does not receive pointer events
[api] retrying page.click action
</code></pre></div>
<p dir="auto">I used <a href="https://chrome.google.com/webstore/detail/coordinates/bpflbjmbfccblbhlcmlgkajdpoiepmkd" rel="nofollow">https://chrome.google.com/webstore/detail/coordinates/bpflbjmbfccblbhlcmlgkajdpoiepmkd</a> to check the coordinates and it seems that PW selects coordinates of invisible part. I am not 100% sure, because I was not able to reproduce the issue on Windows in debug mode, but it happens often with docker tests.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/26511191/88270505-6ce56380-ccde-11ea-8663-bdc61535a3df.png"><img width="302" alt="image" src="https://user-images.githubusercontent.com/26511191/88270505-6ce56380-ccde-11ea-8663-bdc61535a3df.png" style="max-width: 100%;"></a></p>
<p dir="auto">I'll be happy to provide some additional info for you, just let me know.</p>
<p dir="auto">Update:<br>
As a workaround I added one scroll into view for the element to be sure that it's fully visible and ready for clicks.<br>
But it would be nice to have a permanent solution.</p><p></p>