Page MenuHomePhabricator

Replace jquery.stickNode with CSS
Closed, ResolvedPublic2 Estimated Story Points

Description

Wikidata interface currently features a number of sticky elements which are powered by JavaScript. This is a cool feature to have, but it can be realised entirely in CSS, which will work better in most modern browsers.

.wikibase-entitytermsforlanguagelistview-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

I suggest that having to do calculations on scroll is too much for a relatively small enhancement and we can use CSS instead (at the very least for all browsers except IE, if we need that support). This will be more performant and responsive (now I routinely see the table header getting carried away from its content).

This dependency is related to current mechanism for sticking:
https://github.com/wikimedia/mediawiki-extensions-Wikibase/blob/a3736ac4e00dc33f78cc87364fd6feb3ff2301f2/view/resources/jquery/jquery.sticknode.js

This was already done once (and reverted) now ready to do again T212191#6960216

Acceptance criteria 🏕️🌟(18 August 2021)

  • jquery.stickNode is replaced with CSS equivalent

Event Timeline

Addshore moved this task from incoming to needs discussion or investigation on the Wikidata board.

This improvement was done in https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Wikibase/+/670912 and then reverted in https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Wikibase/+/675884
because of a bug (T277999) caused by Chrome not fully supporting position: sticky.

We should re-introduce the change once Chrome 91 is available.

Please see https://caniuse.com/css-sticky

We should re-introduce the change once Chrome 91 is available.

And now I am on 92!

Addshore raised the priority of this task from Low to Medium.Aug 18 2021, 8:34 AM
Addshore set the point value for this task to 2.Aug 18 2021, 10:38 AM

Change 713517 had a related patch set uploaded (by Ladsgroup; author: Ladsgroup):

[mediawiki/extensions/Wikibase@master] Revert \"Revert \"Drop sticknode plugin and replace it with css rules\"\"

https://gerrit.wikimedia.org/r/713517

We should re-introduce the change once Chrome 91 is available.

(Nitpick: if the Chrome bug was fixed in Chrome 91, then we shouldn’t re-introduce the change until Chrome 92 is available, since we support the last two Chrome versions. But that’s now happened as well.)

Change 713517 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Revert \"Revert \"Drop sticknode plugin and replace it with css rules\"\"

https://gerrit.wikimedia.org/r/713517

Looks like this is merged now and the AC is fulfilled, can we move it to test verification?