5

If you check the leagues (you can find me here), there's a very annoying animation with some users:

enter image description here

Yet, when you hover over the users that have that problem:

enter image description here

And, when you try to move the mouse down from one of those users...:

enter image description here

Environment:

  • Windows 10 - Chrome 63
  • 100% zoom (default) at 1366x768 native monitor

Edit

Weird, I just updated to Chrome 64 (latest), and I cannot reproduce anymore.

Improve this question
5
  • Reproduces on Chromium 63 / Ubuntu when zoomed out. Looks like yet another off-by-a-fraction-of-a-pixel layout glitch. Replacing overflow: auto with overflow: hidden is often a good way to fix / hide these issues.
    – Ilmari Karonen
    Commented Jan 26, 2018 at 15:54
  • Pretty sure that I've heard people regularly say that SE does not support zooming?
    – Catija
    Commented Jan 26, 2018 at 16:12
  • @Catija: That's the official line, yes. (Although in practice it does generally work. These days you kind of have to support zooming, at least to some extent, if you don't want your site to be horribly broken on tablets and/or on high-DPI screens.) Anyway, the OP has reported that this happens for them without zooming. These kinds of layout rounding bugs tend to be intermittent and screen/OS/browser/font dependent. Zoom is also one of the variables affecting them, and it's easy to change, so zooming in/out is often a good way to tease out such lurking bugs.
    – Ilmari Karonen
    Commented Jan 26, 2018 at 16:31
  • Can you try zooming out on Chrome 64 and see if that still triggers it? If yes, the actual bug is probably still there and the upgrade just randomly changed something on your system to make it stop happening for you.
    – Ilmari Karonen
    Commented Jan 26, 2018 at 16:59
  • @IlmariKaronen I can reproduce if I zoom out until 33%, where of course I cannot read anything
    – user312421
    Commented Jan 26, 2018 at 17:03

1 Answer 1

Reset to default
2

This looks like yet another spurious scrollbar issue, possibly caused by a Chrome / Blink bug.

Basically, Chrome's layout algorithm seems to sometimes miscalculate the size of some elements by a pixel or two (or 0.000001), causing scrollbars to semi-randomly appear on elements styled with overflow: auto even though the contents should fit (and often even though the containing element should be free to expand to accommodate the content anyway). And the scrollbar itself can then mess up the layout even further, by taking up space and thus forcing other elements out of its way.

Anyway, for elements like this that aren't actually meant to ever have scrollbars, but which only use overflow: auto as a clearfix hack, the simplest solution is to style them with overflow: hidden instead. That way, any fraction-of-a-pixel excess content is simply hidden instead of triggering a useless scrollbar. Or one could remove the overflow style entirely, and just use one of the other standard CSS clearfix tricks like ::after { content: ""; display: block; clear: both }.

(Of course, an even better solution would be to move to CSS flex layout and stop relying on old float and clearfix hacks for horizontal positioning. But that's more of a long-term approach.)

Anyway, tl;dr: .league-container { overflow: hidden } should fix this.

Improve this answer
2
  • I guess the layout algorithm was fixed in Chrome 64. (By the way, I'm still waiting for a comment on my GitHub issue.)
    – Sonic the Anonymous Hedgehog
    Commented Jan 26, 2018 at 16:37
  • @SonictheAnonymousHedgehog: That would be a pleasant surprise, but it's been buggy for years and nobody seems to quite know what or where the actual bug is. More likely the upgrade just triggered some random change in the rounding that made it stop happening for the OP. Intermittent bugs are fun like that.
    – Ilmari Karonen
    Commented Jan 26, 2018 at 16:54

You must log in to answer this question.