Ace: Scroll bar is not visible on Chrome macOS when OS option "Show scroll bars" is not set to "Always"

Created on 5 Feb 2019  ·  3Comments  ·  Source: ajaxorg/ace

It is similar to #2872 but fix from that issue doesn't work here. It can't be fixed by setting a background with small opacity, it works only with non-transparent backgrounds.
Also, I have no issue on the newest Safari 12.0.1 - it works without that fix.

macOS Mojave 10.14.1
Chrome 71.0.3578.98

Most helpful comment

Just for anyone arriving here(like me) from Google to fix this same issue in their own project the solution can be found in this site:

:root {
  --scrollbar-track-color: transparent;
  --scrollbar-color: rgba(0,0,0,.2);

  --scrollbar-size: .375rem;
  --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
}
.overflowing-element::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}
.overflowing-element::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
.overflowing-element::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  /* Add :hover, :active as needed */
}
.overflowing-element::-webkit-scrollbar-thumb:vertical {
  min-height: var(--scrollbar-minlength);
}
.overflowing-element::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-minlength);
}

Just replace .overflowing-element with the class name for the div you want to show the scroll bar.

NOTE: Sorry to hijack this issue, but this problem is so hard to solve and find a solution, because Google keeps directing me to issues in Github for specific projects or to tutorials in how to enable the scroll bars to always show in the MAC OS.

All 3 comments

I think this is the Apple Magic Trackpad bug. If you use it, instant of mouse, you never have permanent scrollbar. Also you will have the bug, that the ACE think there is a horizontal scrollbar and you can not click in the last line of the editor.

Please check if https://github.com/ajaxorg/ace/pull/3987 fixes this

Just for anyone arriving here(like me) from Google to fix this same issue in their own project the solution can be found in this site:

:root {
  --scrollbar-track-color: transparent;
  --scrollbar-color: rgba(0,0,0,.2);

  --scrollbar-size: .375rem;
  --scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
}
.overflowing-element::-webkit-scrollbar {
  height: var(--scrollbar-size);
  width: var(--scrollbar-size);
}
.overflowing-element::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
}
.overflowing-element::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  /* Add :hover, :active as needed */
}
.overflowing-element::-webkit-scrollbar-thumb:vertical {
  min-height: var(--scrollbar-minlength);
}
.overflowing-element::-webkit-scrollbar-thumb:horizontal {
  min-width: var(--scrollbar-minlength);
}

Just replace .overflowing-element with the class name for the div you want to show the scroll bar.

NOTE: Sorry to hijack this issue, but this problem is so hard to solve and find a solution, because Google keeps directing me to issues in Github for specific projects or to tutorials in how to enable the scroll bars to always show in the MAC OS.

Was this page helpful?
0 / 5 - 0 ratings