Blueprint: Page shifts right on context-menu

[volkandkaya]

Bug report

• __Package version(s)__: 1.3.1
• __Browser and OS versions__:54.0.2840.100 Ubuntu 14.04

Steps to reproduce

1. Go to http://blueprintjs.com/docs/#components.context-menu
2. Right click and the page shifts

Actual behavior

Moves the page to the right

Expected behavior

Page doesn't move

[llorca]

I cannot repro on my end. Anyone on Chrome 54 can confirm? No problem on Chrome 55.

[giladgray]

I also cannot reproduce on Chrome 54. We're both on MacOS though, with no access to Ubuntu boxes for testing.

[giladgray]

@volkandkaya could you please try a hard refresh (ctrl+shift+r) and see if that resolves the issue? wondering if your browser is serving you cached old code instead of fetching the new stuff?

[volkandkaya]

@giladgray I also checked on Opera and Firefox. Must be my Laptop, but very weird that it happens on all browsers. Hopefully someone with Ubuntu can test it.

[daryawood]

Page shifts because the scrollbar takes some width and the right click added class 'pt-overlay-open' to body tag with overflow: hidden.

[cmslewis]

It's possible to repro this on Mac by making the following change in System Preferences > General:

Here's the bug in action:

The trickiness here is that from an interaction perspective, native OS X context menus actually block scrolling in the same way that our Blueprint <ContextMenu>s currently do, but they do so while keeping the scroll bar visible. There might be some sneaky way to replicate this behavior with our custom context menus, but nothing I've found in my initial searching seems particularly foolproof or elegant.

Here's a GIF of native context menus blocking scrolling, by the way:

EDIT: I removed the "Status: needs more info" label now that we can repro.

[justinmayhew]

I noticed this as well while browsing the documentation. Context Menus and Alerts both cause the scrollbar to disappear while they're active, causing a small but noticeable shift. It's happening in Chrome and Firefox on Linux.

[giladgray]

so the root cause of the disappearing scrollbar is quite simple: we're setting overflow: hidden on body.pt-overlay-open. removing that property fixes the disappearing scrollbar, but of course allows the user to scroll the page. so we're back to square one.

since body is the scroll container, there's very little we can do to actually prevent page scrolling manually (dang that one line of CSS was elegant).

we could use Overlay backdropProps to cancel mousewheel events which trivially prevents mouse scrolling but does nothing for keyboard scrolling. canceling keyboard scrolling is trickier because there are a lot of ways to do it (arrow keys, pgUp/Down, home/end, space). we could ignore those keys but there are still ways to make the browser scroll, such as a simple cmd+f for a word at the bottom. i don't think there's anything we can do about the builtin browser behavior.

so in short, i have no idea how to solve this.

[adidahiya]

overlays have changed a lot in the last year. comment if you can repro this in 2.0 and want this issue re-opened.

[dandv]

I still saw this problem on Chrome 70 on Ubuntu on the context demo page, which is why I came to this issue. The page would shift briefly while the scrollbar was created. I've tried to reproduce it but it appears to depend on a particular navigation sequence through the demos at blueprintjs.com.