Docs page's sidebar vibrates on mouse wheel scroll on Chrome.

[BiwinJohn]

BPO	24712
Nosy	@warsaw, @birkenfeld, @pfmoore, @vstinner, @tjguk, @ezio-melotti, @karlcow, @zware, @matrixise, @willingc
PRs	[2.7] bpo-24712: Doc: Make sidebar sticky using browser support. #13179
Files	docs-sidebar.patch: Patch

^{Note: these values reflect the state of the issue at the time it was migrated and might not reflect the current state.}

Show more details

GitHub fields:

assignee = None
closed_at = <Date 2019-05-08.13:39:53.452>
created_at = <Date 2015-07-24.23:19:04.741>
labels = ['type-bug', 'docs']
title = "Docs page's sidebar vibrates on mouse wheel scroll on Chrome."
updated_at = <Date 2019-05-08.13:39:53.451>
user = 'https://bugs.python.org/BiwinJohn'

bugs.python.org fields:

activity = <Date 2019-05-08.13:39:53.451>
actor = 'matrixise'
assignee = 'docs@python'
closed = True
closed_date = <Date 2019-05-08.13:39:53.452>
closer = 'matrixise'
components = ['Documentation']
creation = <Date 2015-07-24.23:19:04.741>
creator = 'Biwin John'
dependencies = []
files = ['42917']
hgrepos = []
issue_num = 24712
keywords = ['patch']
message_count = 11.0
messages = ['247303', '247307', '247324', '257768', '258052', '258079', '260123', '265950', '265951', '278003', '341872']
nosy_count = 14.0
nosy_names = ['barry', 'georg.brandl', 'paul.moore', 'vstinner', 'tim.golden', 'ezio.melotti', 'karlcow', 'docs@python', 'zach.ware', 'matrixise', 'willingc', 'Biwin John', 'kats', 'Mike Taylor']
pr_nums = ['13179']
priority = 'low'
resolution = 'fixed'
stage = 'resolved'
status = 'closed'
superseder = None
type = 'behavior'
url = 'https://bugs.python.org/issue24712'
versions = ['Python 2.7']

[BiwinJohn]

The sidebar on the documentation pages ex. https://docs.python.org/2/library/collections.html vibrates/flashes on mouse wheel scroll.
The sidebar with class sphinxsidebar, works okay when scrolling with the scrollbar, Firefox but not with mouse wheel on Chrome.

please consider fixing it.

[willingc]

Biwan John, thanks for the issue report.

I can confirm that there is jitter due to scroll speed lag in Chrome for Python 2.7 docs. This behavior does not happen with Python 3.x docs. No issues with Firefox.

I am using Mac OS X 10.10 with up-to-date Chrome and Firefox.

I believe that this is likely a Chrome scroll issue and not a Python docs or Sphinx issue.

I have triaged this as "needs patch" in case someone is aware of a workaround to resolve. If this is still open after a month, I would recommend closing the issue as a "third party" issue

[BiwinJohn]

The problem exist with the Chrome on Ubuntu, Windows and OSX, but ony with the python docs for version 2.7.

Docs for 2.6 use the same sidebar.

But in 2.7 docs, the content of sidebar is positioned with the style added on scroll,

style="float: left; margin-right: 0px; width: 202px; top: 13px;"

The top value is calculated on scroll, the same code works with FireFox without any problem.

So it might be the way chrome handles the change in values. And we must workaround with our code than waiting for Chrome to get fixed.

Needs to be fixed as, 2.7 is the most used version, comes default with most distros and chrome is the most used browser (50.25% of all)[https://en.wikipedia.org/wiki/Usage_share_of_web_browsers]

Recommendations:

1. Change the sidebar behavior to the 2.6 docs sidebar one.(default top value, users can scroll up to see the content)
   or.
2. Make the sidebar position:fixed and provide a inner scroll bar.

[kats]

Please note that this issue will affect Firefox 46 and up as well; we have enabled asynchronous scrolling as of Firefox 46.

Bugzilla bug for this issue: https://bugzilla.mozilla.org/show_bug.cgi?id=997269
Announcement for asynchronous scrolling: https://groups.google.com/d/msg/mozilla.dev.platform/X2BwGm348jI/Tl26C_1JBAAJ

Also, in Firefox 46 and up, if you open the browser's web console and scroll these documentation pages, you should see a warning about scroll-linked effects with pointers to additional info on why this is happening.

[MikeTaylor]

I can reproduce on Chrome and Firefox Nightly --

Carol, if I'd like to write a patch where would I do that? I see https://github.com/python/pythondotorg, but am not sure that's the right repo. Thanks!

[ezio-melotti]

CSS: Doc/tools/pydoctheme/static/pydoctheme.css
JS: Doc/tools/static/sidebar.js

The repo is https://hg.python.org/cpython/, but there should be a github mirror too. See also the devguide for more info.

[MikeTaylor]

Great, thanks Ezio! Will take a stab now.

[MikeTaylor]

OK, so uh, somehow a few months escaped me before I could get to this. >_>

(I've also just signed the Contributor Agreement with the PSF)

[MikeTaylor]

The bug for Chrome to ship support of position: sticky is here: https://bugs.chromium.org/p/chromium/issues/detail?id=231752 -- it's in active development.

But this patch fixes the jerky sidebar in Firefox as well.

[karlcow]

@ezio.melotti
What is the next step for getting the patch accepted.

[matrixise]

New changeset 8ab24b2 by Stéphane Wirtel (Julien Palard) in branch '2.7':
[2.7] bpo-24712: Doc: Make sidebar sticky using browser support. (GH-13179)
8ab24b2