In a small Edge Window, content is cut off and there's no scroll-bar

Confirmed Issue #14375647

Details

Author
Tobi R.
Created
Oct 25, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce

When I resize Edge to a small width, the page content is cut off (see the cut-off title “Demos” at the top of the page), and the scroll-bar disappears.

Here’s a screenshot:

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/9406777/snapshots/z4b40867c0e519a9669c

In Chrome, the title is not cut off and the scroll-bar is present:

https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/9406814/snapshots/z311922e521bcb1a4547

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

  • Hi,

    How can I re-run the same test?  Can these tests be shared if I create an account?

    Also, can you send a repro for this?  I would like to run the tests on a development build.

    Appreciate the support,

    The MS Edge Team

  • Hi Steven, hi Edge Team

    The URL of the page is on the linked screenshot page:
    https://tobireif.com/demos/

    You can try to reproduce the two reported issues by opening
    https://tobireif.com/demos/
    in Edge (eg on a development build) and resizing the Edge window to be as narrow as possible.

    And if you want to do the exact same test I did, also see the linked screenshot page:
    You’d log into your (existing or new) CrossBrowserTesting account, then at
    https://app.crossbrowsertesting.com/livetests/run
    start the test specified on the page I linked. From that linked page:
    Open the page https://tobireif.com/demos/ on Windows 10 in Microsoft Edge 16 with resolution 1366x768 .
    Then, as described above in my bug report, resize Edge to a small width (eg try the smallest possible width).

    Thanks for investigating the two issues,
    Tobi
    https://tobireif.com/

  • Microsoft Edge Team

    Changed Assigned To from “Steven K.” to “John J.”

    Changed Assigned To to “Bruce M.”

  • Here’s another test case:

    The page

    https://tobireif.com/demos/ellipses/

    in Firefox, Chrome, and in Edge (in that sequence), in narrow windows:

    https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/9878880/snapshots/zab58e782ec60d87f9d8

    In Edge, the content on the right is cut off (not shown).

  • I hope you can fix the issue 😀

  • Microsoft Edge Team

    Changed Status to “Confirmed”

  • Hello,

    Thank you for providing this information about the issue. We have confirmed the problem, and are considering a solution for a future build of Edge. We are presently 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

  • I would imagine this is the same issue as this one: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/

  • Hello,

    I am trying to open an HTML5 based webpage Perfios in Microsoft Edge. While it does not show any of the horizontal or vertical scrollbar (Screenshot), the screen is correctly resized with both scrollbars in Chrome. I guess it might be a similar issue as the one reported here. As a result of this, I am not view the bottom or the right part of the webpage in Edge.

    I am using Windows10 version 1803 Home (Build 17134.48).
    The browser details is as follows: Microsoft Edge 42.17134.1.0 | Microsoft EdgeHTML 17.17134

    Could you please have a look and advise? Also, let me know if it is not the same issue, I shall open a new thread.

  • Hi - I have the same problem and it occurs on many websites, including www.google.com. The issue only affects Edge - the websites are responsive on Opera, Chrome etc… I have software versions as Prasun K. above. The issue does not affect all computers so I guess it may be related to graphics driver or similar (I have a NVIDIA GeForce 850M with driver version 398.11).

    Resetting Edge did not help, and neither did reinstalling the graphics driver.

    To reproduce, open Edge, go to www.google.com and resize the window to get narrower. The design is responsive until about 715px width when the vertical toolbar disappears and the site no longer reflows - content is pushed off the right-hand side of the browser window.

    I hope someone can help!

  • Also, Edge seems to “reset” itself if I open and close the settings window (click “…” top-right, then Settings, then somewhere on the page to close the menu). After doing that, the vertical scrollbar reappears and the responsive design works again - but only as long as the browser is kept open. Close Edge and re-open, and the issue re-occurs. Somehow, using the Settings menu seems to force Edge to re-check its browser window width.

  • Better examples than www.google.com are
    https://www.canon.co.uk/
    https://www.asus.com/uk/
    https://www.orlandochoir.org.uk/
    …and any other site with media queries triggered at less than about 715px.

  • I just spent hours trying to figure out what was going on with my code until I noticed the viewport width in Edge getting stuck at 372px. Chrome and Firefox work as intended. Microsoft is being “special” again. Annoying as hell.

    This is still an issue. Either make the browser window stop resizing to anything smaller, or make the viewport width go lower than 372px like the normal browsers do.

    Thank you.

  • This is still an issue and given that it is an obvious bug I am surprised that it hasn’t been fixed yet. I discovered this problem via a different route - the window.onresize event will no longer fire once the browser width is dragged below 372px - breaks my website because I cannot reliably position navigation elements to right of the web page. Please fix.

  • I’ve since moved to Firefox as my main browser…

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

Sign in