Page MenuHomePhabricator

Use CSS instead of jQuery for wb-claim-name position animation
Closed, ResolvedPublic

Description

Currently a jQuery animation (aka "forced browser repaints in rapid succession") is used for the animating of the .wb-claim-name position when scrolling down.

E.g. the "located in the administrative territorial entity" label on https://www.wikidata.org/wiki/Q70

Can by done by adding a transition declaration in the stylesheet, and updating the callback to set pure css() values instead of animate().

Also, it seems that when scrolling back up the value is not restored correctly (may be an upstream bug in jQuery UI). It ends with:

position: relative;
top: 0.0117645263670028px;
left: 0px;

Event Timeline

Krinkle raised the priority of this task from to Needs Triage.
Krinkle updated the task description. (Show Details)
Krinkle changed Security from none to None.
Krinkle subscribed.
thiemowmde lowered the priority of this task from Medium to Lowest.May 10 2016, 12:11 PM

We recently closed T103485: [Story] Performance of sticky elements feels bad, which solves the main issue in this ticket. What's left is the rounding error described above. Let me look into this.

thiemowmde claimed this task.

I can see the issue on wikidata.org, which still uses the clunky jQuery animation.

On http://wikidata.beta.wmflabs.org/wiki/Q15905 the issue is still kind of there, because the position ends up being something like top: 0.5px when scrolling back up, but as already hinted this is an issue in jQuery. Most probably even intentional. We will not touch this for now because it seems it does not cause any (visual) issues.