Browser's minimum width doesn't work with responsive web pages

Site Outreach Issue #13621468

Details

Author
Krzysztof
Created
Sep 7, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
40.15063
Reports
Reported by 10 people

Sign in to watch or report this issue.

Steps to reproduce

  1. Open responsive web page, e.g. https://www.microsoft.com/pl-pl/
  2. Resize browser’s window to its minimum width.
  3. Observe that page is incorrectly rendered, it’s resized for larger width then browser’s window.

Screenshot attached.
Minimum correctly supported width is ~372px.
Minimum browser window width is ~320px.

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “bbrinza”

    Changed Status to “Site Outreach”

  • It’s up to page to support small sizes, not Edge. Not sure why this was reported to us.

  • Nope. I can confirm this issue is related to Edge, not particular websites. Take blank page with only 3 lines of code and no CSS:

    
    
    
    
    

    Open it in F12, and resize the browser window down to it’s smallest. You’ll be at about 320px. Inspect the html element, go to the Computed tab, and look at its width --> 372px.

    In other words, Edge renders the page at a minimum of 372px wide even when resized smaller.

  • Same happening here. For example if you use @media (max-width: 372px) the query will work, anything below that width wont.

  • Same here!
    For sizes smaller than 372px, web pages are not renderer correctly.
    It’s seems that edge browser don’t resize, or dispatch the resize event.
    Other browser do it correctly for all sizes

  • Also getting this bug. I verified using the tool at http://howbigismybrowser.com/

    I will note that since the last update, the size now bottoms out at 286px, instead of 372px

    @Francois R. The browser can only “support small sizes” if Edge gives the page the right size, which is probably why this was reported to you.

    Image showing bug

  • Tested on 1803 April Update, on a simple page developed by myself.

    If no viewport is set, Edge minimum is 372px, otherwise a scrollbar will be shown. Chrome is 150px and refuse to resize to become smaller And AFAIR, iOS think it is 320px and Android think it is 360px.

    372px is little bit too big IMO. Maybe 320px is a good number, 150px is definitely too extreme.

    @Nic B what do you mean by "Edge gives the page the right size"?

  • I simply meant that while I agree with @Francois R. that it is the responsibility of the page to be responsive to small browser window sizes; the page can only do so if the browser provides accurate information about the size of the browser window.

  • I simply meant that while I agree with @Francois R. that it is the responsibility of the page to be responsive to small browser window sizes; the page can only do so if the browser provides accurate information about the size of the browser window.

  • William,

    I simply meant that while I agree with @Francois R. that it is the responsibility of the page to be responsive to small browser window sizes; the page can only do so if the browser provides accurate information about the size of the browser window.

  • 372px is the “biggest” amongst all browser window sizes no one know why has to be this number.

    320px on iOS is because the 1st gen of iOS is 320x480. Android is probably because the lowest-but-common spec is 720P, i.e. 360px with double pixel.

    Yes, the page is responsible for responsive layout. But maybe give this number a reason, 372px is just weird to everybody. Not to mention if you make the browser shorter, you can make it to 356px. Please try out the website “howbigismybrowser.com” and see the behavior, it is just weird.

  • Having the same issue here. Our site needs to support 320px minimum. Edge won’t allow the page to render at less than 356px;

    Site renders fine on IE11.

  • 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.

  • Chris, I think Android minimum is 360px.

  • Please fix this bug. Super annoying.

  • Thank you Nic B. for researches and testes done on their products for them. You brings the solution even closer.

    Francois R. - “It’s up to page to support small sizes, not Edge. Not sure why this was reported to us.”

    Hi Microsoft team, I would like to give you a second opportunity to verify your sources and to consult your own support forum. The bug is happening on the Edge’s side. You guys made the resolution to solve it on the next version in 2015. That’s a little bit a shame.
    See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14375647/

    I can confirm that even your vertical scrollbar disappears under 372 pixel width. What turn me off a little bit is your capacity to deny responsibilities, without even consulting your team.

    My suggestion is, web developers suffering because of Microsoft products never work properly like any other browser in that world. So please, take the time to shovel issues on the good side, it will be great start.

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

Sign in