GoogleChromeLabs / GoogleChromeLabs/ui-element-samples

Firefox: Custom scrollbar flickers when any ancestor is "position: fixed"

Open
#162 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.1k
Forks
723
Avg merge
3m
Merged PRs (30d)
4

Description

The custom scrollbar is great feature, but I've noticed that if any of the ancestors is "position: fixed", then the scrollbar's dragger flickers during scroll.

However, this behavior only occurs in Firefox - tested on: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/117.0". See this codepen: https://codepen.io/marsielko/pen/OJrmoWq , inspect it with devTools and fiddle with "position: fixed" applied on html/body elements.

If the "position:fixed" is applied, then the scrollbar's dragger flickers, if not, the animation is smooth as expected.

Is there anything I can do to make the scrollbar's dragger animate smoothly in Firefox, as is done in Chrome/Safari...?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.