Issue with disappearing scrollbars?

[user316]

Hello,

I am encountering an issue which is new with SmartClient Version: SNAPSHOT_v12.1d_2020-02-21/PowerEdition Deployment (built 2020-02-21). In the previous version we've been using, this did not occur.

Basically when switching back and forth between tabs in a TabSet, the draggable vertical scrollbar in our customized ListGrids is disappearing. I can see only a few pixels now of the moving scrollbar when it is at the very top or bottom - it appears to be obscured by the scrollbar track below it. Perhaps it's some CSS problem?

When it's working it looks like this:


When the scrollbar disappears it looks like this (you can see just a few pixels on the top). It is actually scrolled to the very top at the moment.



Any ideas on what the problem is? Is this a SmartGWT problem?

[Isomorphic]

Something went wrong with your attachments and the verbal description isn't enough to figure out what you mean. Can you try again?

[user316]

Apologies - I believe I have fixed the images in my original post. Please let me know if not.

[Isomorphic]

What's rendering that scrollbar? It looks like a native Mac scrollbar from an older version of MacOS, since those are now usually only transiently visible. Did you recreate the look of native Mac scrollbars via our skinning system, but leave them visible all the time?

[user316]

We had some custom .css for the scrollbar, but when I switched to the default Isomorphic Enterprise one (the .vScrollThumb class), the same problem was happening. I managed to fix it by adding "z-index: 999999" into the CSS class.

Our CSS now looks like this (the last line is what changed):

.brcmVScrollThumb {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZWFmMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZDVkZGU3Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNiZGNhZGIiLz48c3RvcCBvZmZzZXQ9IjgyJSIgc3RvcC1jb2xvcj0iI2FkYmRkMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2EwYjJjYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #e6eaf0), color-stop(50%, #d5dde7), color-stop(50%, #bdcadb), color-stop(82%, #adbdd1), color-stop(100%, #a0b2ca));
  background-image: -webkit-linear-gradient(left, #e6eaf0 0%, #d5dde7 50%, #bdcadb 50%, #adbdd1 82%, #a0b2ca 100%);
  background-image: -moz-linear-gradient(left, #e6eaf0 0%, #d5dde7 50%, #bdcadb 50%, #adbdd1 82%, #a0b2ca 100%);
  background-image: -o-linear-gradient(left, #e6eaf0 0%, #d5dde7 50%, #bdcadb 50%, #adbdd1 82%, #a0b2ca 100%);
  background-image: linear-gradient(left, #e6eaf0 0%, #d5dde7 50%, #bdcadb 50%, #adbdd1 82%, #a0b2ca 100%);
  -webkit-box-shadow: inset #ebf0f9 1px 0 1px 0, inset #ebf0f9 -2px 0 4px 0;
  -moz-box-shadow: inset #ebf0f9 1px 0 1px 0, inset #ebf0f9 -2px 0 4px 0;
  box-shadow: inset #ebf0f9 1px 0 1px 0, inset #ebf0f9 -2px 0 4px 0;
  border: 1px solid #969696;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  margin-left: 1px;
  margin-right: 2px;
  z-index: 999999; /* This is necessary for the scrollbar to be above the scroll track */
}

[Isomorphic]

Is your thumb a square? The second image still shows the top edge of what we would assume to be the thumb, and that would indicate it’s not a zIndex problem.

Are you manipulating zIndices elsewhere with other calls to moveAbove/moveBelow/ etc?

Also, the zIndex here would be overridden by framework code.

Basically this has never been reported before and this fix should not have done anything!

[killfr0g]

Hello, I am also facing this issue in many parts of our application. The scrolling works with the mouse scroll wheel but there is no thumb showing. Here is an example from a scrollable list of items in a filter builder:



I have inspected the scrollbar and can see the HTML for the thumb, maybe this helps you to debug?



I have made no changes to the scrollbar styling, and we are using the Stratus skin. SmartClient Version: v12.1p_2020-04-08/LGPL Development Only (built 2020-04-08) and Chrome 89.0.4389.82

Thank you.

[Isomorphic]

Is your issue also a zIndex issue, in other words, if you increase the zIndex in the browser's developer tools, do you then see the thumb?

Can you provide a way to reproduce this, in samples?

It really seems like both of you have a third-party library installed that you forgot about, which is somehow messing with zIndices..