2 scrollbars on MacOS Chrome #2

[andrew-skrypnyk]

Hi all, I have the same problem on my macOS with Chrome, which was mentioned in #10 by @dnish

I checked and removed all overflow properties on parent blocks, add the max-height rule, but still have 2 scrolls.

code:

<CustomScroll heightRelativeToParent="calc(100%)">
    {this.renderList(predictions)}
</CustomScroll>

here is an online demo, look at Predictions block.

What I do wrong?

[rommguy]

@AnarH93 I'm checking

[rommguy]

@AnarH93 I found a solution for the issue, it's not simple, as it involves changing the dom structure of the custom scroll, and might break previous usages if someone assumed a specific dom structure, in css selectors for example.
I will publish a major version with the fix sometime next week, including tests for the changes.

I've pushed the fix to a branch for now, it's not fully ready but should work.
Can you please try and check if the it fixes the issue in your site ?
To check:

• Clone the repo
• checkout mac-os-double-scroll branch
• run yarn start
• run npm link
• in your project directory, where the package.json is located, run npm link react-custom-scroll
• If you consume the customScroll.css from a cdn or something like that, you'll need to get it from the local node_modules/react-custom-scroll folder to get the linked version.

To check if you got the correct css, after you reload your project with the fixed version, check that the div with class "positioning" (first child of outer-container) has position: relative.

[rommguy]

@AnarH93 Please check that this solves the issue, I'm waiting for your response before I publish a new version to NPM

[andrew-skrypnyk]

Sorry, I was busy on this days.

I check it now and it works perfectly, thanks!

[rommguy]

I'm considering an alternative solution, that will be more backwards compatible.
It turns out that if I render the outer-container div with the GPU, it also solves the problem, and I don't need to change the DOM structure.
For example, you can open your site and add transform: translateZ(0) to the outer-container div, and you'll see the double scroll is solved.
Will publish a working version later this week

[rommguy]

Turns out this only happens on Chrome on retina displays.
Using GPU rendering solves it

[rommguy]

@AnarH93 I published version 3.0.0 with the fix.
Please let me know if the issue persists.
Also, I would appreciate if you could star this repo, thanks

[rommguy]

It turns out using GPU has some suprising effects in Chrome.
It causes fixed position elements to be positioned relative to 'relative' positioned elements in this case the outer container.
Removing the translateZ property and adding another positioning div seems like the safer solution