none
Resonsive Sites Respond to Width Change Differently in Desktop versus Modern IE

    Question

  • 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


    Shawn Keene

    Monday, July 07, 2014 4:51 PM

All replies

  • 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

    Monday, July 07, 2014 4:48 PM
  • Hi Shawn,

    I don't see any resize event handlers or @viewport rules on that site. Looks like its all Angular controlled.

    can you provide a link to your (assuming your the site developer) adaptive css file?

    or

    test on Immersive IE or visual studio's emulator with different screen resolutions....

    there are some viewport sizes (screen resolutions) that are undocumented.. I have seen forum posts about IE11 on a non-handheld device being rendered as a mobile device... indicating that 'mobile first' is used with a screen width that is not in the sites adaptive layout css.

    Using the developer tool's emulation tab in IE11 Desktop to emulate the viewport size I see rendering layout differences.

    the Wikipedia listing of screen sizes can be found here - http://en.wikipedia.org/wiki/Display_resolution

    Bear in mind that the dev channel for IE11/12 is available form http://devchannel/modern.ie

    Problem web sites, bug reports or feature requests can be posted to the IETeam at http://connect.microsoft.com/ie

    Regards.


    Rob^_^

    Monday, July 07, 2014 9:54 PM
  • Hi Shawn,

    Please don't make multiple posts to multiple forums. One is sufficient.... If it is made to the wrong forum the forum moderators will move it to the appropriate forum.

    I have made a reply to your post in the IE web development forum which is appropriate for questions about html, css and scripting for website development.

    Please include with your questions a link to your website or a mashup that shows the issue. Questions about third-party sites should in the first instance be directed to the site developers. Ensure you are using the MS Compatibility View lists and do not have the site in your browsers compatibility view list.

    regards.


    Rob^_^

    Monday, July 07, 2014 10:03 PM
  • That site is just a good example, but I don't have control over it.  Here's one from a domain I have access to:  vernjenphotography.com.  Try it in any desktop browser and adjust the width of the browser.  Try it on the phone, it works also.  But not "modern" or immersive IE.  In modern IE, it doesn't respond correctly.

    Is this even expected?
    1)  Why would the two modes process the same markup differently?  Isn't the fundamental development point about developing for IE was that modern UI and desktop browser work identically?

    It's common.
    2) There are many responsive-driven websites that have this issue, but not all. MSN.com responds identically and beautifully in both modern and desktop mode.

    There is a way around it.
    3) Including the CSS rule I mentioned above, to set the device width on the MS viewport, is a valid solution that has worked in every case I've tried (about 11 sites).

    But it's still just a work-around.
    4) By Microsoft's own developer documentation, websites should not have to make any markup changes to support the modern mode. In fact, Microsoft removed the ability to detect it so that this couldn't be done.  The "modern" IE should be rendering the same as "desktop" and "phone", but it doesn't.

    I've been contacting sites that do not respond correctly in modern mode, such as the first mention of readwrite.com (pardon the pun, but they were very responsive to the feedback about adding this CSS rule). But you know most places just laugh and say "who cares? It's modern IE. No one uses it and we aren't going to make code changes just because it's `special`."  And they shouldn't have to, because according to the actual documentation, it's supposed to render the same.  And users that try to use it get burned and even fewer will use modern IE. 

    This is harmful to the developers and users, and the platform.

    Monday, July 07, 2014 11:44 PM
  • Hi Shawn,

    the photography site is using UAS sniffing.... Immersive and desktop Ie are different.

    f12>debug tab, search or userAgent or navigator or mobile.

    good luck.

    ("https");if(k){/windows|win32/i.test(k)?e.os="windows":/macintosh|mac_powerpc/i.test(k)?e.os="macintosh":/android/i.test(k)?e.os="android":/symbos/i.test(k)?e.os="symbos":/linux/i.test(k)?e.os="linux":/rhino/i.test(k)&&(e.os="rhino");/KHTML/.test(k)&&(e.webkit=1);/IEMobile|XBLWP7/.test(k)&&(e.mobile="windows");/Fennec/.test(k)&&
    (e.mobile="gecko");if((h=k.match(/AppleWebKit\/([^\s]*)/))&&h[1]){e.webkit=f(h[1]);

    also there are a lot of interoperability issues.

    https://www.modern.ie/en-us/report#http%3A%2F%2Fwww.vernjenphotography.com

    see also:

    http://developers.google.com/speed/pagespeed/insights/?url=http%3A//www.vernjenphotography.com/euuxxr212gn50pd7e8tcrq7c1l5gy2

    We've found that this webpage is using responsive web design practices to support many browsing devices. This helps your users get the better site experience on devices like Apple iPad, Microsoft Surface, Amazon Kindle, XBOX 360, and other modern browsers on smaller or larger screens.

    Breakpoints should be defined according to the content on your site.  We suggest the following common breakpoints as a starting point to target desktop, tablet, and mobile form-factors:

    The graph below shows the window widths for which we detected media query support (in green). We recommend testing your site at the non-highlighted window widths to confirm it works well.
    NOTE: This graph uses common breakpoints which may help you target specific form-factors.

    see modern.ie test results....

    this screen shot shows IE11 desktop emulation in a lower resolution with a fake Immersive IE UAS. The Dev Tool shows where the resize event handler is called from.


    Rob^_^

    Tuesday, July 08, 2014 2:52 AM
  • Your first paragraph - are you saying the UAS string is different in modern versus desktop?  How do I emulate the immersive browser in the desktop with F12 tools?

    This is a squarespace site, as you know they supply responsive templates.  I told them that their sites don't work on IE modern but do in desktop, and they said "it's microsoft's problem, the two browsers are supposed to render the same."

    You see, I have a chicken and the egg problem. Sites like ReadWrite.com and SquareSpace and so many more all coded for IE standards, but IE isn't following its own promise of rendering the same everywhere.  Companies are not willing to put in special extra effort to fix the modern IE when it doesn't even follow its own rules.  So the websites abandon it, users can't use it, and it never gains traction or everyone complains about IE not even being compatible with itself.

    So do I go back to the support team and say "tough cookies, Microsoft says you have to code special exceptions for modern IE after all, sorry"?

    PS. I can 'fix' it myself in the sites I run by adding that one simple CSS rule, but I'm trying desperately to convince sites to please add it so that we can use the site on our Microsoft tablets (I've contacted 22 major sites so far that fail in modern and received responses from 6 of them so far).  Obviously these sites all work great on phones, tablets from other OS's, and even the Surface if I use Desktop IE.


    Shawn Keene

    Tuesday, July 08, 2014 3:03 AM
  • Hi,

    you use third party templates at your own risk. Template Monster IS a MONSTER.

    Wordpress... don't get me started....

    from what I can see, THEY are using the wrong design patterns (UAS sniffing), no MAIN content.... the modern.ie Adaptive Design report says they are missing a number of vendor prefixed properties.

    as you know WE do not work for nor represent MS.

    You should use the Developer tool to DEBUG THEIR layouts

    or

    if I was you I would teach myself by following the MS guidelines (see links on the modern.ie report)

    Your MSMVP entitlements gives you access to MSDN resources and the MVP private lists.

    Regards.


    Rob^_^

    Tuesday, July 08, 2014 6:33 AM
  • That's fine. How about a simple page with no template?  Create your own empty blank HTML5 fully standard-compliant page, and then observe that the "modern" immersive browser renders it differently than the desktop and phone IE do.

    This is the bug I'm desperately trying to report.

    According to the developer documentation, this should not happen. And the bug is impacting tens of thousands of sites, harming the platform, and alienating users and developers.

    How do I escalate this bug?


    Shawn Keene

    Tuesday, July 08, 2014 1:07 PM
  • That's sad that the MSPN requests you to put the entire Microsoft.com domain into compatibility view.  That one partner group has just demanded that you downgrade the huge spectrum of all other *.microsoft.com sites just so their one little corner will work.  What a terrible example to set.

    Shawn Keene

    Tuesday, July 08, 2014 7:38 PM
  • Yes, we obviously have to undo that INcompatibility View for this forum.

    And every other MS site.

    I cannot find how to put partners.microsoft.com alone.

     

    But is that a rendering bug, that horizontal line in metro IE?

    It's not there in desktop IE.

     

    In metro IE, the Microsoft logo is missing too.  Where the line is.

    No way to debug with metro IE to see why, what's different.

    Shouldn't be any difference.  Yes?  No?    Humm.   : P

     
    Tuesday, July 08, 2014 7:47 PM
  • I absolutely hate Twitter as a conversational medium, but I've been going around with two experienced web devs and Ade Bateman, IE Product Manager.

    Lots of finger pointing who is doing the right thing, and indeed even what the "right" thing is.  See IE10 Snap Mode and Responsive Design for a deep conversation regarding the standard, the "standard" that the rest of the world has fallen on, and Microsoft supporting the seemingly official but not yet adapted standard, while the rest of the world has moved on.

    It also 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.

    The trouble is:

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

    Shawn Keene

    Tuesday, July 08, 2014 11:09 PM
  • Tuesday, July 08, 2014 11:15 PM
  • I absolutely hate Twitter as a conversational medium, but I've been going around with two experienced web devs and Ade Bateman, IE Product Manager.

    Lots of finger pointing who is doing the right thing, and indeed even what the "right" thing is.  See IE10 Snap Mode and Responsive Design for a deep conversation regarding the standard, the "standard" that the rest of the world has fallen on, and Microsoft supporting the seemingly official but not yet adapted standard, while the rest of the world has moved on.

    It also 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.

    The trouble is:

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

    Shawn Keene

    yes... in snap view the page is Scaled.... that's expected.

    see your viewport meta tag values on your photography site page....

    With IE10 metro... many USERS complained....

    why doesn't such n such a website fill the screen in metro view?

    ans: the site does not have a viewport meta tag

    my personal opinion is that I like the automatic scaling.... it works well with windows store apps that open up web content in the browser. Resizing the web document or using pinch zoom is not a great hastle.

    that aside... the modern.ie report and my screen shot shows that you are missing some screen resolutions in your viewport media rules.


    Rob^_^

    PS: All Feedback to the IE Team should be posted to

    HTTP://CONNECT.MICROSOFT.COM/IE

    these are public peer to peer support forums. we do not work for nor represent MS.

    Wednesday, July 09, 2014 8:14 AM
  • I understand that there' I appreciate the complexity of the issue, but the fact remains that these are highly responsive professional sites (some of the most trafficedsites online), and the designers put great effort to make them responsive. They work on every browser on the planet (including IE9/10/11, plus even Windows Phone for cryin' out loud), but "metro IE" breaks it for no good reason, and then says it's the developer's fault. These sites would work just fine in metro if the broken scaling could be turned off and allow the already-responsive site to handle the width change itself (as it already does!)


    This week I've contacted 47 highly responsive sites, such as the ones listed in this conversation, and requested that they please add the CSS rule to turn off metro scaling.

    One said they'd look into it, the rest asked "why is metro IE requiring special changes that aren't required for desktop IE? No, we aren't going to support them. They should work just like they work on the desktop. If Microsoft wants to sabotage their own metro browser, let 'em."

    Seriously, that's the sentiment I get.  And I can't say I blame them -- IE's not supposed to be forcing developers hands, it's supposed to be supporting standards.  And again, it already works on the desktop.


    Shawn Keene

    Wednesday, July 09, 2014 2:13 PM
  • I edited my post while you were typing.  I just tried that Holy Grail demo with metro-IE side-by-side mode.  The behavior is very confusing to me.  I think we would say that is "broken".  What do you think of it?  Would your CSS patch fix it?

     

    You contacted 47 sites?  Wow.  You're really on a crusade.

    Wednesday, July 09, 2014 2:27 PM
  • I patched Mozilla's "Holy Grail" script with your CSS, Shawn.  Very good mod.

    But the Flexbox still malfunctions with metro-IE in side-by-side mode, yes?

    Also.  For me, repeatedly resizing the side-by-side box crashes it.  For you too?

     

          https://googledrive.com/host/0B8BLd2qPPV7XcE5KX0pmN2FTX3c

     

    Wednesday, July 09, 2014 2:55 PM
  • I tested the Holy Grail demo with IE Dev Channel yesterday, Shawn.  It fails exactly the same.  I was waiting for the MVP who calls me a DICK to report his findings.  But he cannot find blame for UA Sniffing, because there is none.  He cannot ridicule Wordpress or other Templates, because there are none.  He cannot dismiss its malfunction due to Modern.Ie, or W3C HTML5 Validator, or W3C CSS Validator error reports, because there are none.  So this honored MVP spokesman who calls me a DICK, he has just ducked-out.

    Do you want to know why webmasters of influential sites greet you with scorn?  Even laugh at your evangelistic efforts, Shawn?  Review the denial, pushback and disrespect that has happened in this very thread.  That is the support we get here.  Who would not be resentful?  That is why.

    Thursday, July 10, 2014 5:50 PM
  • Rob/IEC, please refrain from name calling. Instead, please report Derosnec if he pushes your buttons.

    Thanks!


    Ed Price, Azure & Power BI Customer Program Manager (Blog, Small Basic, Wiki Ninjas, Wiki)

    Answer an interesting question? Create a wiki article about it!

    Friday, August 01, 2014 11:21 PM
  • I understand that there' I appreciate the complexity of the issue, but the fact remains that these are highly responsive professional sites (some of the most trafficedsites online), and the designers put great effort to make them responsive. They work on every browser on the planet (including IE9/10/11, plus even Windows Phone for cryin' out loud), but "metro IE" breaks it for no good reason, and then says it's the developer's fault. These sites would work just fine in metro if the broken scaling could be turned off and allow the already-responsive site to handle the width change itself (as it already does!)


    This week I've contacted 47 highly responsive sites, such as the ones listed in this conversation, and requested that they please add the CSS rule to turn off metro scaling.

    One said they'd look into it, the rest asked "why is metro IE requiring special changes that aren't required for desktop IE? No, we aren't going to support them. They should work just like they work on the desktop. If Microsoft wants to sabotage their own metro browser, let 'em."

    Seriously, that's the sentiment I get.  And I can't say I blame them -- IE's not supposed to be forcing developers hands, it's supposed to be supporting standards.  And again, it already works on the desktop.


    Shawn Keene

    I 100% agree with you, I'm a front-end developer and am running into this issue on the sites I design. It's the dumbest functionality I've ever seen. The developers are already accomodating the viewport width change and MS decided they are going to ignore/override it. Why? It's stupid.

    But here is some helpful info...

    http://msdn.microsoft.com/en-us/library/ie/hh708740(v=vs.85).aspx

    Tuesday, August 05, 2014 8:31 PM