@-ms-viewport no longer working

By design Issue #7970618

Details

Author
jingqi x.
Created
Jun 23, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14366
Reports
Reported by 11 people

Sign in to watch or report this issue.

Steps to reproduce

What’s more, the viewport meta tag doesn’t work on Edge for Desktop either. No longer can I make the webpage responsive in tablet mode.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Assigned To from “Ibrahim O.” to “Matt R.”

    • Update: neither does the manual setting to turn it on in about:flags work.

    • Just adding… this works properly in Desktop Mode… but no longer works properly in Tablet Mode… where you really need it. Terrible regression. Hate that this still hasn’t been fixed in the RTM.

    • Microsoft Edge Team

      Changed Status to “By design”

    • Unfortunately we were seeing a large number of sites breaking due to @-ms-viewport. 
      In most cases this was caused when sites didn’t update their @-ms-viewport rule after a redesign, and the old viewport rule was inappropriate for the new site design. 
      As a result, we decided to disable the feature behind an about:config flag to avoid these bugs.

       

      We’re continuing to work with the W3C to iterate on the feature design and hope to reintroduce support once we’ve settled on a behavior that all browser vendors will implement.

    • Nice to know the first page/default page looking like crap in Edge while in tablet mode is “by design” I shouldn’t need to switch to desktop mode on a tablet for pages to become readable.

    • “@-ms-viewport rule after a redesign”

      Stop asking web developers to make special Microsoft-only accommodations. Just render your site in a standard way.

      The @-ms-viewport rule wouldn’t have been necessary if you had rendered properly in "Modern IE’ on Windows 8, which also ignored the view port. Windows 8 started this whole mess of the modern browser IE ignoring the viewport (yet for some reason, desktop IE rendered it fine). Why did desktop IE render a responsive mobile-first site, when the “app” browser didn’t? And then the problem just got carried forward into Edge.

      Consumers pick up a flagship Surface tablet, and the only way to read the most popular websites in the world is to abandon the modern UI, and go to the desktop mouse-based browser — on their tablet. It’s embarrassing that this has been a problem since 2012 with the release of Windows 8 and once again the “answer” is 'by design/ignoring this’.

      You give a bad experience "by design". Pitiful and shameful.

      Ref 1) https://social.msdn.microsoft.com/Forums/ie/en-US/47edc6c9-318c-4db5-b89a-fd865a9bee98/resonsive-sites-respond-to-width-change-differently-in-desktop-versus-modern-ie?forum=iewebdevelopment

      Ref 2) https://connect.microsoft.com/IE/feedback/details/915286/resonsive-sites-respond-to-width-change-differently-in-desktop-versus-modern-ie

    • Matt,

      You’re telling us that because some websites who took the time to implement an MS specific standard as a work-around to you not simply honoring the viewport meta tag like every other mobile browser does, but didn’t update their code after a redesign, you chose to break it for everyone else? You’ve got to be kidding me.

      THERE IS A STANDARD. It’s the viewport meta tag. Just fucking honor it! Problem solved!

    • We are looking into ways to improve tablet mode without asking web developers to make Microsoft-specific changes.  Particularly for developers who have invested in making their site responsive, we do want to make sure their customers get the intended experience.

       

      We’ve looked at disabling the content scaling behavior entirely as Shawn suggests.  However, there are unfortunately many sites that are not responsive and break in various ways when viewed in a smaller browser window.  Most commonly this includes unintended layout wrapping or clipped content due to overflow-x:hidden.  On devices with larger screens this is annoying, but can be dealt with by resizing the browser window until it is large enough to fit the content.  But on small tablets even a fullscreen browser window can be too small to show desktop-first content.  In the worst circumstances this can completely prevent usage of a site.  We currently scale content down in tablet mode to ensure that doesn’t happen.

       

      Bryan mentioned the viewport meta tag, but that is unfortunately not very well suited either.  When we investigated that option we found that many sites make assumptions about the types of devices that support the viewport meta tag and break when those assumptions are incorrect.  For example, some sites use a responsive layout but specify a static width in their meta tag (e.g. 400) rather than using device-width.  This is done with the assumption that the only meta-viewport-supporting device that will view the content is approximately phone-sized - viewing on larger devices would result in massive upscaling of that content.  Other sites pair their usage of the meta tag with UA string checks and then rearrange their layout based on that UA string.  In that case supporting the meta tag but failing the UA check results in an unsupported layout.

       

      We want to be cautious that in the process of improving the experience on responsive sites, we don’t break non-responsive sites.  So although it’s by design specifically that we’ve removed the @-ms-viewport rule for the reasons I mentioned above, the overall tablet mode experience is still very much up for improvements.

       

      (As a side note, the meta viewport tag is actually non-standard currently.  I’m working with the W3C on getting it standardized though.)

    • Matt, you’re killing me. Even if the meta viewport isn’t an official standard, it’s been the defacto standard since Apple introduced it on the first mobile full-featured web browser with the iPhone. It works perfectly fine for responsive design in literally every single other browser on the planet. Don’t get me wrong… It’s great that you’re working to standardize it (I’ve run into the weird scaling issues it has in the past when not specifying device-width), but in the mean time, can’t you just make the very basic 1:1 scaling viewport options work, seeing as they ARE consistently honored in every single other mobile web browser… at least as a stop gap until you can come up with whatever permanent solution you’re pondering?

    • meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no"

    • By simply supporting "width=device-width,height=device-height,initial-scale=1.0,user-scalable=no", sites that WANT to work properly in Edge will have a way to do so… and those who’ve handled it the standard way for iOS / Android will also benefit from having it work properly in Edge for free. If you want to ignore “width=NNN” because it’s implemented in different ways in different browsers… fine. I get that. But at least give those of us who are paying attention to Edge the option to function properly. Right now there is no option. None.

    • Sorry… used the word “standard” incorrectly again. I meant “wide spread / best practice” way.

    • What’s most frustrating is that only Edge has different behavior. But web developers can’t detect if a person is using Edge in Tablet Mode, so we have no ability to “workaround” this Microsoft problem even if we wanted to. We just have to suck it up and realize that our sites will always suck for a Microsoft tablet user. Bummer.

    • Platform status page needs to be updated at any rate to reflect the loss of progress. Sad.

      https://developer.microsoft.com/en-us/microsoft-edge/platform/status/cssdeviceadaptation/?q=viewport

    • The platform status page (which still shows prefixed support for this) links to this web platform page detailing exactly what I’m asking for:

      https://docs.webplatform.org/wiki/concepts/mobile_web/responsive_design

      RESEPECT THE F’n VIEWPORT META TAG AND YOU SOLVE EVERYTHING! YAY! EASY! OMGBBQ!

    • It’s not good to implement a feature without well-designed public open specification. I don’t want the World Browser War II where browsers make features as IE6 did.

    • Opened an issue for the status page anyway: https://github.com/MicrosoftEdge/Status/issues/458

    • Matt,

      The reasons you are giving for abruptly removing @-ms-viewport do not add up to me!

      You say: “In most cases this was caused when sites didn’t update their @-ms-viewport rule after a redesign, and the old viewport rule was inappropriate for the new site design.”

      And cite a poor extreme example: "For example, some sites use a responsive layout but specify a static width in their meta tag (e.g. 400) rather than using device-width. "

      As a developer who followed proper guidelines, I don’t quite see how paying for the damage of such dumb mistakes by an irresponsible or ignorant dev is my responsibility. I don’t understand why you would consider fixing those in the first place. That seems out of place. Those sites should be broken in IE10 and IE11 too, not just Edge. i.e. In all fairness considered for the user. The cases you are citing are those devs’ responsibility to test their sites and fix them.

      And to: “We want to be cautious that in the process of improving the experience on responsive sites, we don’t break non-responsive sites.”

      I can’t think that there would be more such broken sites, than there are RWD sites affected by this. Do an outreach to them but please don’t penalize good RWD sites for other dev’s mistakes.

      Whether @viewport become a standard or not, or whether you implement the meta viewport is a long term proposition on this issue. We need a fix quickly. Not waiting for those standards to be decided. The current state of squeezing down responsive sites to 1024px as if they were zoomed out, and reverting policy, especially without prior warning, is not acceptable.

      Can’t you quickly patch @-ms-viewport in tablet mode to ignore static widths on Edge Desktop as a temporary fix. According to what you are saying, it’s all that’s needed to fix the broken cases.

    • “Can’t you quickly patch @-ms-viewport in tablet mode to ignore static widths on Edge Desktop as a temporary fix. According to what you are saying, it’s all that’s needed to fix the broken cases.”

      Slow Clap

    • So am I correct in reading all this that there is no way to enable responsive design on Edge in the Anniversary Update when in Tablet Mode and that is 'by design’?

    • Yup. Still no solution in sight in any of the insider builds either. Epic fail.

    • It appears that Edge 41.16251.0.0 and EdgeHTML 16.16251 now support responsive web design.

    • No, it now just thinks every web page is responsive, which means it just drops support for non-responsive web mdesign.

    • Chris B, were you testing in tablet mode? It’s never had a problem in desktop mode.

    • Reading this article on Surface 3 with tablet mode https://brunch.co.kr/@roysday/85 is now more uncomfortable as I have to scroll horizontally, vertically, then horizontally again, vertically again, again, again.

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

    Sign in