Ugly Scrollbars Bug


#1

Has anyone had Atom start using ugly (white) scrollbars when using a dark theme?

Here’s a screenshot: http://d.pr/i/Ytbo

I can’t figure out how to make them go away. When I first started using Atom, I didn’t have this problem. The second time I opened the app, they showed up. Rebooting the app doesn’t seem to help.


#2

They’ve always been like that for me. Pretty awful :frowning:


#3

These are OS X specific scrollbars it looks like. Meaning you could disable them showing up system wide, but not application specific I don’t think.


#4

You can restyle them via CSS in your ~/.atom/styles.less file or maybe tweak this setting so they only show when hovering?


#5

I added the following to my styles.less and it let me style the scrollbars in the editor view but doesn’t seem to apply to the tree view for some reason.

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: none;
}

::-webkit-scrollbar-thumb {
    background: rgb(106, 107, 108);
}

#6

It seems like Atom (or possibly chromium?) doesn’t “obey” the :vertical and :horizontal selectors on ::-webkit-scrollbar

I would expect this to work, but it doesn’t:

::-webkit-scrollbar {
  &:vertical {
    width: 8px;
  }
  &:horizontal {
    height: 8px;
  }
}

#7

Hi!

It’s kind of weird, the first time I opened my styles.less and styled the scrollbar it was working, even with the &:vertical… but now somehow it doesn’t work anymore. Still in the process of trying to figure out why.


#8

Settings my scroll bars to When scrolling worked for me (see @kevinsawicki’s comment and screenshot above). Thank you!


#9

It does work,

When you reopen a project and the scrollbars are visible from the start the styles are not applied, however if you then resize the tree view till there are no scrollbars and then resize back to the size where there would be scrollbars, the styles are applied.


#10

It does seem to work if you resize until there are no scrollbars and then resize back. I’m curious as to why it doesn’t work on load when it works in the editor.


#11

It appears to be a redraw bug, putting the following code in your init.coffee seems to atleast fix the issue even though it’s a pretty dirty hack.

atom.workspaceView.eachEditorView () ->
  el = document.getElementsByClassName("workspace")[0];
  el.style.display = "inline-block";
  setTimeout( ->
    el.style.display = "block";
  , 50)

EDIT:
Might not be a redraw bug, but just a timing issue. As a delay of 0 should also trigger a redraw… and since a delay is needed I suspect a timing issue instead of a redraw issue.

EDIT#2:
If your screen flickers with this fix, change the inline-block to run-in


#12

Nice, that does fix it. Now it looks much better.


#13

Here’s how I’ve made them look even better on dark themes:

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: #444;
  box-shadow: 0 0 6px black inset;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #222;
  box-shadow: 0 0 1px black inset;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #111;
  box-shadow: 0 0 2px black inset;
}

#14

Has anyone gotten this to work on the tree view scrollbars?


#15

Yep, see @dehlak’s comment above.


#16

@dehlak’s tree-view-redraw hack works for me, but only with run-in, and not inline-block.


#17

thanks for the idea, working great :slight_smile:

edit: anyone reported this back to github?


#18

Np!

I filed a bug report :smile:


#19

Weird. I didn’t see have this before and after the most recent update all the scrollbars are white and don’t match the default theme.


#20

The only solution that worked flawless is to change the preferences, any other that evolved changing the styles+scripting would eventually break…

Still this is something that would be great solve inside the editor, now I miss the scrollbars in other apps just because atom could not handle it

:disappointed: