Overflow-x: Hidden on Body element breaks block editor toolbar positioning

[grantmeagher]

I've noticed an issue with a specific line of code and how it affects the positioning of the block editor toolbar on the Wordpress back-end.

This is the code:

body {
	overflow-x: hidden !important;
}

The issue I'm noticing is that when I select a Block to edit, the toolbar that normally appears fixed above the block is not visible and is instead further up the page. If you scroll upwards to see it, you'll notice that it's position is dynamically changing and scrolling downwards on the page, changing its "top" absolute positioning. See here:
https://www.loom.com/share/6131f075e8864ec6a85e594ecf372938

I'm using the Advanced Custom Fields Pro plugin and including the front-end stylesheet on the page previews within the blocks. When debugging, disabling the the plugins does not fix this. Only removing the above code does, which confirms that loading in the front-end styling with this code is the issue. Not sure how it could be affecting the vertical positioning of this specific element, since all it's doing is removing the ability for the viewport to horizontally scroll, but that seems to be the problem.

[cbirdsong]

I've also encountered this issue several times.

[getsource]

Hi @grantmeagher!
Thanks much for the report, and sorry for the wait!

This was tested in [a triage session today)(https://wordpress.slack.com/archives/C02QB2JS7/p1624340696353900), and folks present were not able to reproduce it.

@talldan noted that there was a similar issue in #32178, which was fixed by #32212.
Assuming this issue's problem is fixed by the same PR, the fix is available in Gutenberg 10.8+

Because it looks like it has been fixed, I'm going to close this issue, but if you're still seeing the problem with Gutenberg 10.8+ or trunk, please feel free to reopen.