Perfect-scrollbar: In Chrome when using perfect-scrollbar I am having a weird flickering issue for my other html elements

[udithachandana]

In Chrome when using perfect-scrollbar I am having a weird flickering issue for my other html elements.
I have a HTML page with a scrollable content area (i.e. area where I have used the perfect scrollbar). On top of that area I have a command button panel (i.e. panel with the “position:fixed” css rule) which is fixed at the top. Here first I have to vertically scroll a little in the scroll area. After that whenever I entered in to the scrollable area or existed from the scrollable area the command panel start flickering.

To see a simulation of this issue please refer to the following URL.

https://jsfiddle.net/g7p9hdhv/2/

Reproduction steps: -

1. Vertically scroll a little in the red color area
2. Now take your mouse in and out from the red color area.
3. Watch how the black color area blinks

I would be very much obliged if any of you guys tell me how to stop this blinking.

[hatashiro]

Looks like a Chrome rendering bug. For the workaround, you can force the fixed element to be rendered by GPU by putting transform: translateZ(0).

https://jsfiddle.net/g7p9hdhv/3/

Hope it helps.

[udithachandana]

Thank you very much for the quick reply. Like magic it works. Thanks again !!

[Bhuvan-Arora]

Thanks, @utatti, This workaround fixed my issue :)