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

Scrollbar disappearing/flickering when styled to increase width/height #17002

Open
Daijobou opened this Issue Mar 20, 2018 · 19 comments

Comments

Projects
None yet
9 participants
@Daijobou

Daijobou commented Mar 20, 2018

Prerequisites

Description

With Update to version 1.25.0 After start the file-scrollbar disappear or flickering or stay. Its little random. Same in Safe-mode.

I can click on fileA in tabs there is no scrollbar change to another file and go back to fileA and scrollbar appear and go next file and come back its again disapeared or flickering and disapeared.

The scrollbar in treeview working always fine.

Edited by @Ben3eeE to include steps to reproduce:

Steps to reproduce

  1. Open your personal Stylesheet
  2. Add the following contents:
::-webkit-scrollbar {
width: 25px !important;
height: 25px !important;
}
  1. Reload Atom

Expected: Scrollbar to have more width and height

Actual: Scrollbar has more width and height but is flickering

Versions

Atom : 1.25.0
Electron: 1.7.11
Chrome : 58.0.3029.110
Node : 7.9.0

apm 1.19.0
npm 3.10.10
node 6.9.5 x64
atom 1.25.0
python
git 2.7.0.windows.1
visual studio

@rsese

This comment has been minimized.

Member

rsese commented Mar 20, 2018

Thanks for the report - just to clarify a few things:

  • you mentioned it happens randomly, would you say it happens less than 25% of the time?
  • What version of Windows are you running?
  • Can you share a GIF/screencast of the behavior?

About the repro steps, are you just clicking back and forth between 2 file tabs and eventually the scrollbar will eventually either disappear or flicker?

@Daijobou

This comment has been minimized.

Daijobou commented Mar 20, 2018

  • More as 90% of times I have no scrollbars
  • Windows 10
  • I never use such tool before. Have you maybe a recommandation?

Start atom I see a scrollbar, after few seconds scrollbar disappear magical. Toggle tree-view the scrollbar show up again. Change tab, disappear for all tabs. Toggle tree-view again and the same game. Scrolling flickering scrollbar. Change tab = disappear. Now I can change tab and in 10% the scrollbar show up, but most flickering and disappear. Very random.

@rsese

This comment has been minimized.

Member

rsese commented Mar 21, 2018

I never use such tool before. Have you maybe a recommandation?

I use https://www.cockos.com/licecap/ - if you can record a GIF of this behavior in safe mode, that might be helpful.

@rsese

This comment has been minimized.

Member

rsese commented Mar 21, 2018

Oh also a couple of more questions:

  • Have you made any changes to your styles.less file?
  • What UI theme are you using?

If you've made changes to your styles.less file, can you comment them out or just rename the file and if you're using a community UI theme, can you switch to One Dark? Then restart Atom and let us know if you can still reproduce.

@Daijobou

This comment has been minimized.

Daijobou commented Mar 22, 2018

Thanks rsese for link. Nice tool.

I not change anything in styles.less, but maybe a package? Last package I installed was symbols-tree-view. uninstall that package but not help. Theme is "One dark", but the issue is with "Atom dark" too.

Here two gifs

issuea
issueb

In my big files its a little different like flickering and default scrollbar is most hidden or disappear after scrolling.

Oh, I forgot safe mode ^^ here a short one

issuec

@Ben3eeE

This comment has been minimized.

Member

Ben3eeE commented Mar 22, 2018

@Daijobou Just to be sure. Did you check the contents of your stylesheet? You can open it from the file menu by picking the Stylesheet... option.

@Daijobou

This comment has been minimized.

Daijobou commented Mar 22, 2018

Thats the content of Stylesheet

/*

  • Your Stylesheet
  • This stylesheet is loaded when Atom starts up and is reloaded automatically
  • when it is changed and saved.
  • Add your own CSS or Less to fully customize Atom.
  • If you are unfamiliar with Less, you can read more about it here:
  • http://lesscss.org
    */

/*

  • Examples
  • (To see them, uncomment and save)
    */

// style the background color of the tree view
.tree-view {
// background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
// border-color: red;
}

::-webkit-scrollbar {
width: 25px !important;
height: 25px !important;
}

@Ben3eeE

This comment has been minimized.

Member

Ben3eeE commented Mar 22, 2018

@Daijobou It seems you have styling for the scrollbar width and height in your stylesheet:

::-webkit-scrollbar {
width: 25px !important;
height: 25px !important;
}

Can you try to remove these lines to see if this resolves your issue?

@Daijobou

This comment has been minimized.

Daijobou commented Mar 22, 2018

Oho, yes that fixed it. But I known that this lines exists since I use atom, so the problem with this is new in 1.25.0.

The set of "height" is here nonsense, but set of "width" is a must be. Without that for me the scrollbar is not usable and no difference hide or not. Its far too small.

@Ben3eeE

This comment has been minimized.

Member

Ben3eeE commented Mar 22, 2018

@Daijobou Thank you 🙇 I agree that styling the scrollbar should be possible without flickering so I will leave this issue open for now.

/cc: @rsese Do you want to check if this used to work in Atom 1.24 and if this is a regression?

/cc: @simurai Is there something wrong with the way the scrollbar is styled here that could cause this? Or is there some issue with styling the scrollbar past a certain width/height? I had issues earlier when trying to style the scrollbar but I don't know if I was doing it correctly 😅

@Ben3eeE Ben3eeE changed the title from Scrollbar disappearing, flickering, working very random (1.25.0) to Scrollbar disappearing/flickering when styled to increase width/height Mar 22, 2018

@Ben3eeE

This comment has been minimized.

Member

Ben3eeE commented Mar 22, 2018

I edited the body of the issue to include steps to reproduce and the title of the issue 🙂

@rsese

This comment has been minimized.

Member

rsese commented Mar 22, 2018

/cc: @rsese Do you want to check if this used to work in Atom 1.24 and if this is a regression?

Yep I'll check it out 👍

@rsese

This comment has been minimized.

Member

rsese commented Mar 22, 2018

/cc: @rsese Do you want to check if this used to work in Atom 1.24 and if this is a regression?

Confirmed that on 1.25 on Windows 10, I see the scrollbar disappear - e.g. I was able to make it disappear and reappear by adding newlines to a file. I then installed 1.24 and don't see this behavior anymore.

@rsese rsese added the regression label Mar 22, 2018

@simurai

This comment has been minimized.

Member

simurai commented Mar 26, 2018

I can sort of reproduce this on macOS too (when "Show scroll bars: Always" is set):

scrollbar

It seems ok if the width/height is 14px or smaller. But if 15px or higher, the scrollbar disappears when hovering with the mouse. It's probably related that the parent container is set to 15px width:

screen shot 2018-03-26 at 6 10 01 pm

So if the ::-webkit-scrollbar is wider, it causes some rendering glitch?


@Daijobou Do you mind trying to test with

::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
}

Or would that be too small anyways?

@SwissArmyBud

This comment has been minimized.

SwissArmyBud commented Apr 2, 2018

Dropping in to +1 on this issue.

Running Atom 1.25.0 x64 on Win8.1, same problems in safe mode.

I have the same constraint mentioned by @simurai where I cannot style scroll bars above 14px without strange disappearing behavior. Bars will show on window resize, and continue to display until the Atom is no longer the current window, after which they disappear permanently - until another window resize.

Using the "standard" method for styling the scroll bars:

.scrollbars-visible-always {

  ::-webkit-scrollbar {

    width: 15px; // BROKEN AT 15 OR MORE
    height: 15px; // BROKEN AT 15 OR MORE

    &-track {
        border: 0px;
        border-radius: 5px;
        background-color: rgba(200,200,200,0.35) !important;
    }

    &-thumb {
        background-color: rgba(255,200,200,0.35) !important;
        border: 0px;
        border-radius: 5px;
    }

  }

}
@cortical-iv

This comment has been minimized.

cortical-iv commented Apr 16, 2018

@SwissArmyBud hey that's actually a useful workaround for me, just setting it to a number <15!

@cehberlin

This comment has been minimized.

cehberlin commented May 18, 2018

I can confirm the issue with Ubuntu 16.04 and Atom 1.26.1. Workaround is setting scrollbars to <15. However, my former configuration was 16px.

@knightReigh

This comment has been minimized.

knightReigh commented May 31, 2018

Is there a way to also make the inactive scroll bar wider?

@grunlowen2

This comment has been minimized.

grunlowen2 commented Jul 11, 2018

I had this same issue, and @SwissArmyBuds change worked, but only when I lowered the width/height.

     width: 10px;
     height: 10px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment