Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't scroll the editor when the mouse is at the right most edge of the screen #14803

Closed
segevfiner opened this issue Jun 16, 2017 · 24 comments

Comments

Projects
None yet
@segevfiner
Copy link
Contributor

commented Jun 16, 2017

Prerequisites

Description

I can't scroll the editor when the mouse is at the right most edge of the screen. Also happens when I close the right docks.

Steps to Reproduce

  1. Open Atom in full screen with a long enough file so that there will be a vertical scroll bar.
  2. Move your mouse to the very right most edge of the screen and try to scroll by clicking the scroll bar. It doesn't work.
  3. Move it slightly to the left and you can click and scroll.

Expected behavior: I can click the scroll bar even when the mouse is at the right most edge of the screen.

Actual behavior: I can't scroll. I have to move the mouse slightly to the left.

Reproduces how often: Always

Versions

Atom    : 1.18.0
Electron: 1.3.15
Chrome  : 52.0.2743.82
Node    : 6.5.0
apm  1.18.1
npm  3.10.10
node 6.9.5 x64
python 2.7.13
git 2.13.1.windows.2
visual studio 2015

Windows 10.0.15063 x64

Additional Information

atom-1_18-scroll-bug

@segevfiner segevfiner changed the title Can't scroll the editor when the mouse is at right most edge of the screen Can't scroll the editor when the mouse is at the right most edge of the screen Jun 16, 2017

@rsese

This comment has been minimized.

Copy link
Member

commented Jun 16, 2017

Thanks for the report! I was able to reproduce in Windows 10 and macOS 10.12.5 with Atom 1.18.0. h/t @lee-dohm for finding atom/one-dark-ui#181 which sounds like the same issue.

It's in the One Dark repo though and I was able to reproduce with multiple UI themes (for One Dark I disabled the dock toggle buttons too) - can you confirm which UI theme you're using @segevfiner and if you can reproduce with multiple UI themes?

@segevfiner

This comment has been minimized.

Copy link
Contributor Author

commented Jun 17, 2017

@rsese I'm using one-dark-ui It reproduces for me with all 4 built-in UI themes (one-dark-ui, one-light-ui, atom-dark-ui, atom-light-ui).

@lee-dohm

This comment has been minimized.

Copy link
Member

commented Jun 19, 2017

Interestingly, this reproduces for me in Chrome also. So this may be a Chromium thing rather than an Atom thing.

@rsese

This comment has been minimized.

Copy link
Member

commented Jun 19, 2017

Hmmm, I wasn't able to reproduce in Chrome on macOS 10.12.5 - do you see the same scrolling problem in Chrome @segevfiner?

@segevfiner

This comment has been minimized.

Copy link
Contributor Author

commented Jun 19, 2017

I'm not seeing it with Chrome 59.0.3071.104 on Windows 10.0.15063. I don't have a copy of the same Chrome/Chromium version used by Atom.

@lee-dohm

This comment has been minimized.

Copy link
Member

commented Jun 20, 2017

Turns out that it was a Chrome extension that was causing the problem for me in Chrome.

@rsese

This comment has been minimized.

Copy link
Member

commented Jun 20, 2017

Ahhh gotcha, thanks @lee-dohm - since the issue isn't specific to a particular theme, I'll leave this issue open, tag as a bug, and leave a comment in atom/one-dark-ui#181. Let me know if you think this belongs somewhere else though @lee-dohm ✌️

@simurai

This comment has been minimized.

Copy link
Member

commented Jun 21, 2017

@segevfiner Can you drag the scrollbar if you go to Settings > Themes > One Light/Dark and then enable the "Hide docks toggle buttons" option? It should remove the 1px "hover area" for the docks toggle buttons.

screen shot 2017-04-22 at 11 10 36 am

Not sure what to do for people that want to keep the toggle buttons AND want to scroll on the outer edge... 🤔 Currently you have to choose.

@segevfiner

This comment has been minimized.

Copy link
Contributor Author

commented Jun 21, 2017

@simurai This does work around the issue for me.

I wonder... Isn't there some magic with float and event bubbling that can be done so that the scroll bar still receives events despite the 1 pixel div?

@simurai

This comment has been minimized.

Copy link
Member

commented Jun 22, 2017

I wonder... Isn't there some magic with float and event bubbling that can be done so that the scroll bar still receives events despite the 1 pixel div?

Hmm.. yeah, maybe? The .vertical-scrollbar element is still touching the edge, with the 1px wide .atom-dock-inner element being physically on top. Maybe when pressing on .atom-dock-inner it could ignore all events and pass it to the underlying .vertical-scrollbar?

/cc @atom/core

@segevfiner

This comment has been minimized.

Copy link
Contributor Author

commented Jun 22, 2017

@simurai Then this is probably caused by this (static/docks.less:41-46):

  &:not(.atom-dock-open) {
    // The dock should only take up space when it's active (i.e. it shouldn't
    // take up space when you're dragging something into it).
    position: absolute;
    z-index: 10; // An arbitrary number. Seems high enough. ¯\_(ツ)_/¯
  }

I don't think events bubble from absolutely positioned elements to elements in normal flow... I guess this rule is for moving the dock out of normal flow which than makes it sized using shrink-to-fit/content-based sizing, which makes it 1px due to min-width/min-height. I wonder if there is a different way to do this rule... The other option is to manually propagate events using JavaScript.

EDIT: I think events do bubble from absolute elements but only to their DOM ancestors. But the dock div is not a child element of the editor that it's covering.

@steelstring94

This comment has been minimized.

Copy link

commented Jul 21, 2017

Confirmed reproduced, hiding the dock works around for me.

@steelstring94

This comment has been minimized.

Copy link

commented Jul 21, 2017

@simurai What I don't understand here is, for this dock toggle button - it's on the left side of the screen. The scrollbar is on the right. Why would the toggle button affect the scrollbar?

@segevfiner

This comment has been minimized.

Copy link
Contributor Author

commented Jul 21, 2017

@steelstring94 You can also place docks on the right side. And the 1-pixel div there seems to exist even if you don't have any docks, but have them enabled. I think the div serves as a hover area for showing the dock buttons. It really should propagate events somehow so as not to cause this though. See #14803 (comment).

@steelstring94

This comment has been minimized.

Copy link

commented Jul 21, 2017

Confirming that going into the DOM and deleting the right dock also fixes this.

@steelstring94

This comment has been minimized.

Copy link

commented Jul 21, 2017

Adding the following to your styles.less will workaround this bug without getting rid of the button to open the left dock:

.atom-dock-inner { &.right { display: none; } }

@segevfiner

This comment has been minimized.

Copy link
Contributor Author

commented Jul 21, 2017

Adding the following to your styles.less will workaround this bug without getting rid of the button to open the left dock:

.atom-dock-inner { &.right { display: none; } }

That will of course disable the right docks area. Note that it is currently used by default by the core GitHub package.

@steelstring94

This comment has been minimized.

Copy link

commented Jul 21, 2017

Using this will still let you open the dock, but you won't be able to do it with the pop-up button, you'll have to use a keyboard combo or something: .atom-dock-inner { &.right { &:not(.atom-dock-open) { display: none; } } }

@lee-dohm lee-dohm added the regression label Jul 31, 2017

@Khangeldy

This comment has been minimized.

Copy link

commented Oct 19, 2017

Same problem on my atom (Arch linux/gnome) present. So there 2 solutions for me first - install minimap package and second is - change tree-view pac to right on screen. But i didn't find on setting of tree-view, so maybe they deleted this feature.

@Zireael07

This comment has been minimized.

Copy link

commented Oct 19, 2017

The tree view setting is gone because now you can just drag the tree view over :)

@ricpelo

This comment has been minimized.

Copy link

commented Dec 5, 2017

I have the same issue. Is there a workaround, please? Thanks!

@vlad0337187

This comment has been minimized.

Copy link

commented Dec 18, 2017

I have this too. Didn't find it and created duplicate.

Why do I consider this important:
for 2 matters: 1. Not to force users aiming on Atom's narrow scrollbar; 2. To be consistent with the majority of applications providing such action.

In other software you don't need to aim onto scrollbar, you can just move cursor to right edge of screen and drag it. For example, in Firefox, Xed, Gedit, Gnome-Terminal, Chromium, etc.

Video with reproducing the issue on YouTube and commentaries in subtitles (please, turn on them): https://youtu.be/GLXMQFgKJOA
Same video, but in .mkv format: atom_suggestion-2017-12-16_20.37.09 (1).mkv.zip

I use Linux Mint 18.3 x64 Cinnamon, Atom 1.23.1.
This bug is also present on the same version of Atom on Windows and Mac.

@simurai

This comment has been minimized.

Copy link
Member

commented Dec 19, 2017

Workarounds

@ricpelo A workaround is to remove the right "dock hover affordance". As noted in the above comment #14803 (comment), paste the following in your styles.less file:

// Hide right dock when not open
.atom-dock-inner { &.right { &:not(.atom-dock-open) { display: none; } } }

Downside: You then need to use keyboard shortcuts to open the dock. Or for example the Git panel has a "changed files" button in the status bar at the right that can be clicked.


Another option if you use the One dark/light UI themes and don't need the "dock toggle buttons", you can disable them in the theme settings: #14803 (comment)

@lock

This comment has been minimized.

Copy link

commented Jul 14, 2018

This issue has been automatically locked since there has not been any recent activity after it was closed. If you can still reproduce this issue in Safe Mode then please open a new issue and fill out the entire issue template to ensure that we have enough information to address your issue. Thanks!

@lock lock bot locked as resolved and limited conversation to collaborators Jul 14, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.