@viewport rule has side-effect of making scrollbars auto-hide

Issue #7165383

Details

Created
Apr 11, 2016
Privacy
This issue is public.
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

  1. Open http://output.jsbin.com/zewaza/quiet in Edge.
  2. Observe that the page’s scrollbar overlaps the content and automatically hides if you stop scrolling for a short while.
  3. Compare this to almost any other webpage, where the page’s scrollbar does not overlap the content and is always visible.

See also: 
https://github.com/twbs/bootstrap/issues/18543](https://github.com/twbs/bootstrap/issues/18543)[https://github.com/twbs/bootstrap/issues/18543](https://github.com/twbs/bootstrap/issues/18543)

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Rick J.”

  • When applying

    @-ms-viewport {
      width: device-width;
    }
    

    to a page in Edge, even when on a desktop computer, it seems to have the unexpected (and in our case, unwanted) side-effect of switching the browser’s scrollbars into auto-hide mode, as if a style of

    body { -ms-overflow-style: -ms-autohiding-scrollbar; }
    

    had also been magically applied. There doesn’t seem to be any basis for such behavior in the CSS Device Adaptation spec, especially for desktop browsers. This also makes mobile-optimized webpages weirdly inconsistent with “normal” webpages which have non-auto-hiding scrollbars that don’t overlap the page’s content.

    See also: https://github.com/twbs/bootstrap/issues/18543

  • When applying

    @-ms-viewport {
      width: device-width;
    }
    

    to a page in Edge, even when on a desktop computer, it seems to have the unexpected (and in our case, unwanted) side-effect of switching the browser’s scrollbars into auto-hide mode, as if a style of

    body { -ms-overflow-style: -ms-autohiding-scrollbar; }
    

    had also been magically applied. There doesn’t seem to be any basis for such behavior in the CSS Device Adaptation spec, especially for desktop browsers. This also makes mobile-optimized webpages weirdly inconsistent with “normal” webpages which have non-auto-hiding scrollbars that don’t overlap the page’s content.

    See also: https://github.com/twbs/bootstrap/issues/18543

  • Erm, sorry, those attachments were meant for a different issue…

  • Microsoft Edge Team

    Changed Assigned To from “Rick J.” to “Ibrahim O.”

    Changed Steps to Reproduce

    Changed Assigned To to “Rick J.”

    Changed Assigned To to “Christian F.”

    Changed Status to “Confirmed”

    Changed Status from “Confirmed”

    Changed Status

  • Hello,

    Thank you for providing this information about the issue. We have confirmed the problem, and we are working on a solution for a future build of Edge. We are tracking this issue as a duplicate of an existing internal bug report. We look forward to additional feedback you may have on how we can improve Microsoft Edge.

    Best Wishes,
    The MS Edge Team

You need to sign in to your Microsoft account to add a comment.

Sign in