Resonsive Sites Respond to Width Change Differently in Desktop versus Modern IE - by Shawn 'Cmdr' Keene

Status : 

  Won't Fix<br /><br />
		Due to several factors the product team decided to focus its efforts on other items.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.


ID 915286 Comments
Status Closed Workarounds
Type Bug Repros 0
Opened 7/7/2014 9:54:09 AM
Access Restriction Public

Description

Sites that are built to be responsive to width changes (such as  www.readwrite.com) will respond differently in the desktop IE versus modern IE.

In the readwrite.com example, the site adapts to new browser widths on the desktop IE (and on the phone).  However, it does not adapt correctly in the modern IE.  This is especially troublesome because the modern IE is the one more likely to be "snapped" to a small width on the side of the screen.

I've been told that IE and Modern IE should render the same markup identically, but this is of course not the case in this situation.  Sites cannot specifically detect that they are running in modern mode, but one CSS rule has been provided to alleviate the problem:

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

When this CSS rule is added, the site functions responsively inside the modern UI the same as it already did on desktop/phone.

Question:  Is this desired operation?  Are the two modes supposed to render markup differently?  Why would phone/desktop adapt correctly, where modern cannot?

Is it up to sites to add this code?  It seems we need an informational awareness campaign, because many sites (such as readwrite example here) would operate much more elegantly and support the Windows modern UI platform and users much better if this single CSS rule was added to their sites.

Given the lower user base of Windows tablets, many sites are not aware of this need.  And users experience a bad experience because of it, resulting in poor perception of the Windows platform.

I would really hope for an update that solves the issue, by having modern IE render the same as desktop IE (which is supposed to already be the case, according to the developer instructions).


Shawn Keene


--- Followup
I have learned from IE Product Manager Ade Bateman, that this comes down to viewport scaling. Apparently desktop and modern IE use the same rendering but different scaling rules to provide "mobile style scaling" (the full page zoom-out that shows the whole page but is useless to read or use).  That is only in modern IE.  Desktop and Phone don't do that.

•this modern mode 'mobile style scaling' is breaking the web designer's actual intended scaling / responsive layout

•the designer's intended scaling / responsive layout already works on IE desktop / Chrome / Firefox / Android / iOS / Windows Phone

•Only modern mode IE causes the problem, on a device when the mobile responsive layout is most important

•The web designer can add an MS-specific CSS rule, but that requires extra work to support what should already work, and devs are reluctant to go out of their way to help IE's deficiencies.

•right, "right", or wrong: if you're doing something different and it breaks what works everywhere else (even on your own product's other devices/modes), you're breaking the web.

•And you're hurting Windows. Consumers pick up a Surface, and the only way to read some of the most popular websites in the world is to abandon the modern UI, and go to the desktop mouse-based browser -- on their tablet.
Sign in to post a comment.
Posted by Microsoft on 1/21/2016 at 12:48 PM
Thank you for the feedback. We have passed this along to the area owners and will take this feedback into account. Resolving as Won't Fix since this is the convention we use once feedback has been passed on to area owners.

Thanks,
The MS Edge Team
Posted by Microsoft on 7/22/2014 at 1:10 PM
Thank you Shawn
We were able to reproduce the issue and are investigating it.

Best regards,
The Internet Explorer Team
Posted by Shawn 'Cmdr' Keene on 7/21/2014 at 1:40 PM
I don't see your video attachment as of yet, but I've been in contact with the ReadWrite development team and they have graciously agreed to make the special required changes to support the modern browser, despite the MSDN instructions that say no special accommodations are required to support the modern UI.

Here's a different example. Try www.gizmodo.com. This professional site uses a responsive design that works in every browser and scales the content correctly at small widths on Chrome/Firefox/IE Desktop and even works properly on Windows Phone -- but does NOT scale correctly in the immersive "modern UI" IE browser. Which as I said above, is the number one place where a user is likely to use a small width (while multi-tasking on a Surface tablet).

Even though these web developers went to great pains to have a responsive design, the only way to view the content correctly on a Microsoft tablet is to bail out of "modern UI" and go back to the desktop browser.
Posted by Microsoft on 7/21/2014 at 1:29 PM
Hello Shawn,
    Thank you for the feedback regarding resizing differences between Modern IE and desktop. We have been testing with the URL you provided (readwrite.com) and we are not able to reproduce the same issue you are reporting. I have attached a video of our repro attempt can you please review the video and point out any steps we are missing to successfully repro the issue?
    We are testing with Windows 8.1 IE 11.0.9600.17206 11.0.10 (KB2962872)
Best regards,
The Internet Explorer Team
Posted by thumbdоwn on 7/9/2014 at 11:19 AM
So Shawn. What do you think about IECustomizer MVP calling me a DICK in your msdn thread? Constructive way to deny the issue, eh?

http://social.msdn.microsoft.com/Forums/windows/en-US/47edc6c9-318c-4db5-b89a-fd865a9bee98/resonsive-sites-respond-to-width-change-differently-in-desktop-versus-modern-ie#86aa08bc-c3f1-4a3f-834a-c9d3c0a80af3



Anyway. To the MS-Connect folks.
Here is Mozilla's "Holy Grail" flexbox demo, [1] without Shawn's patch, and [2] with Shawn's CSS patch. Check it in metro-IE, especially side-by-side mode.

[1] https://googledrive.com/host/0B8BLd2qPPV7XWFRxalJ3UFlMOE0

[2] https://googledrive.com/host/0B8BLd2qPPV7XcE5KX0pmN2FTX3c