Last modified: 2014-10-04 19:05:00 UTC
Go to http://en.wikipedia.beta.wmflabs.org/wiki/October1stchrome?veaction=edit and resize the browser window if you have a large screen. The image will try to be very wide, and will cause horizontal scrollbars to appear, even though the image itself is obscured by a white sidebar. This only happens if the image is floating left; right-floating images are fine. This causes problems in particular with the new "scroll context into view" feature in combination with the recent PopupWidget changes: we horizontally scroll to something that's to the right of the visible part of the context. Didn't we talk about making scrollIntoView use a different element for popups, or something?
Eh… This actually looks like a bug in OO.ui.Element.scrollIntoView (or perhaps getDimensions). Swapping it for native HTMLElement#scrollIntoView works correctly (or, at any rate, doesn't scroll to the side). I'll investigate.
getDimensions indeed returns weird values for elements that have margin-left larger than their computed width. Correct (for some other menu): BROKEN: { { "borders": { "borders": { "bottom": 0, "bottom": 0, "left": 0, "left": 0, "right": 0, "right": 0, "top": 0 "top": 0 }, }, "rect": { "rect": { "bottom": 396.984375, "bottom": 438.984375, "height": 41, "height": 38, "left": 257.5, "left": 1747, "right": 382.5, "right": 1747, "top": 355.984375, "top": 400.984375, "width": 125 "width": 0 }, }, "scroll": { "scroll": { "left": 0, "left": 0, "top": 0 "top": 0 }, }, "scrollbar": { "scrollbar": { "bottom": 0, "bottom": 0, "right": 0 "right": 0 } } } } rect.left and rect.right are equal (and incorrect) and rect.width is 0.
Oh wait, that comes from HTMLElement#getBoundingClientRect… Hmm.
This only happens on Blink browsers, works on Firefox, IE and Opera 12. Hooray.
Actually… I'm confused. All other browsers also return the same weird result from getBoundingClientRect(), but none of them scroll sideways like Blink does.
So what *actually* happens on all other browsers is that we just can't scroll elements into view horizontally in them at all, because getClosestScrollableContainer() returns document.body, which is not scrollable horizontally. Instead, document.documentElement is scrollable horizontally. Probably. I arrived at the above testing in IE. This of course doesn't bring us any closer to solving this particular bug, but it's fascinating that the two issues cancel each other out.
Anyway, this bug only affects one browser right now, only when a page contains a thumbnail that exceeds page width, and doing this right would require some non-trivial rewriting (or reverting all of the PopupWidget and VE changes made recently). Lowering priority and severity.
I filed bug 71609 in OOjs UI about scrolling into view not working.
