Vertical overflow `HTML` to prevent layout 'flickering' about sanitize.css HOT 8 CLOSED

Could you setup a test page? We need to see if this flickering still occurs in the last two versions of major browsers, and if so, exactly which browsers+versions this occurs in so that it can be precisely documented.

from sanitize.css.

Sure, I just whipped up a Codepen in 2 seconds. You see the "Open" and "Close" hyperlinks moving left/right...

http://codepen.io/davidhund/full/EaGWWG

from sanitize.css.

Awesome work (even if it was quick)! While I do see the scrollbar appear, I do not see any shifting in Chrome 40, Firefox 36, or Safari 8.0.5 for Mac. Which OSs/Browsers/Versions were you able to test?

from sanitize.css.

I see a (very slight) jump on Safari 6.1.6, Chrome 41.0.2272.89 and Firefox 31.0, all on the mac.

Make sure the content is centered (screen is > 30em) and place your mouse 'hand' cursor in the bottom middle of the "O" of the "Open" hyperlink. Clicking without moving your mouse pointer will show a shift and the pointer will be below the "l" of "Close". Clicking again.. etc... :-)

I could only quickly test on an older iMac but I'm pretty sure it happens almost everywhere...

from sanitize.css.

This would depend on the scroll bar settings in the OS. I agree that it's a good idea to add. I always thought of it as "layout shifting".

from sanitize.css.

Yes, I used to be a huge advocate of this, and I guess my experience on a Mac (and my secret hope) was that it was resolved. This shouldn’t be blocked by any other requests, even #2, which suggests overflow: hidden on all the things.

I would like to run a few more tests, particularly to see how Windows IE10+ machines handle this change, and how background images or colored, full-width elements are affected.

from sanitize.css.

I now believe :root { overflow-y: scroll; } is safe to add in. For operating systems and browsers that use the overlay scrollbar style, this pleasurable effect is not lost by defining overflow-y.

Also, a major aww yiss:

:root {
    -ms-overflow-style: -ms-autohiding-scrollbar; // gives IE the overlay style
}

That was tested in IE10 for Windows 7.

Notes:

• MacOS Lion introduced the overlay style for scrollbars.
• The overlay style does not impact horizontal space, which is nice.
• MSDN mentions an -ms-overflow-style property that may be worth setting to -ms-autohiding-scrollbar by default, if it is supported in any IE.
• Firefox added support for the overlay style: after hating on it. It’s a fun read.
• There is no standard forthcoming for this overlay style. If there was, it fizzled.

See:

e2670d0

from sanitize.css.

Nice!

After-the-fact-FYI: Win7 Chrome 41.0.2272.89, Fx 36 and IE11 all have the layout shift.
Cool find re: -ms-autohiding-scrollbar! Works in Win7/IE11. overflow-y: scroll has no negative side-effects. Thanks!

from sanitize.css.