search

StarCitizenTools / mediawiki-extensions-TabberNeue

A MediaWiki extension that allows wiki to create tabs.
https://www.mediawiki.org/wiki/Extension:TabberNeue
GNU General Public License v3.0
10 stars 15 forks source link

Failure in detecting end of scroll involving fractional element size #124

Closed csalinezh closed 4 months ago

csalinezh commented 4 months ago

Currently https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue/blob/cfe539df906890c511d145ab68d2cc52bb50f661/modules/ext.tabberNeue.legacy/ext.tabberNeue.legacy.js#L183 checks whether the navigation tab has been scrolled to the right end by comparing tabList.scrollLeft + tabList.offsetWidth and tabList.scrollWidth. This is straightforward and appears to be a common practice.

However the logic fails for me (Chrome 124.0.6367.60) due to some rounding issue. The respective values when I have scrolled to the right end are 20.571428298950195, 984 and 1005. It leads to a small cosmetic issue (the next arrow never disappears).

MDN says that scrollWidth will be rounded to integer, which is probably the cause. The document says getBoundingClientRect() can be used to obtain accurate values, however I'm not able to figure out how to get scrollWidth from it. It indeed shows a fractional width of this element (984.071533203125).

csalinezh commented 4 months ago

A quick fix would be changing that lower bound to tabList.scrollWidth - 1. That might be just enough to work around this rounding issue.

alistair3149 commented 4 months ago

Thank you for your insight! The fractional pixel issues have been my bane of existence for a long time and this is super helpful in various issues plaguing TabberNeue regarding fractional pixels. I will be releasing a patch later and hopefully it will address all of the related issues.