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 T73609 in OOjs UI about scrolling into view not working.

This doesn't appear to be a problem anymore; we scroll to where the popup is, and no further. Trevor and Ed did some changes to PopupWidget that appear to have fixed this problem. Perhaps we can close this and the dependency?