As I installed Windows 8.1 last week I decided that I really should take a closer look at Internet Explorer in the Modern/Metro environment again. Right away I ran into two issues that are real head scratchers to me.

Modern Split Windows don't resize Viewport but Zoom Out

This one falls in the "WTF, really?" department: It looks like Modern Internet Explorer's Modern doesn't resize the browser window as every other browser (including IE 11 on the desktop) does, but rather tries to adjust the zoom to the width of the browser. This means that if you use the Modern IE browser and you split the display between IE and another application, IE will be zoomed out, with text becoming much, much smaller, rather than resizing the browser viewport and adjusting the pixel width as you would when a browser window is typically resized.

Here's what I'm talking about in a couple of pictures.

First here's the full screen Internet Explorer version (this shot is resized down since it's full screen at 1080p, click to see the full image):

This brings up the first issue which is: On the desktop who wants to browse a site full screen? Most sites aren't fully optimized for 1080p widescreen experience and frankly most content that wide just looks weird. Even in typical 10" resolutions of 1280 width it's weird to look at things this way. At least this issue can be worked around with @media queries and either constraining the view, or adding additional content to make use of the extra space. Still running a desktop browser full screen is not optimal on a desktop machine - ever.

Regardless, this view, while oversized, is what I expect: Everything is rendered in the right ratios, with font-size and the responsive design styling properly respected.

But now look what happens when you split the desktop windows and show half desktop and have modern IE (this screen shot is not resized but cropped - this is actual size content as you can see in the cropped Twitter window on the right half of the screen):

Mind you this is with the page set up to a fixed viewport with the Viewport meta header:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

What's happening here is that IE is zooming out of the content to make it fit into the smaller width, shrinking the content rather than resizing the viewport's pixel width. In effect it looks like the pixel width stays at 1080px and the viewport expands out height-wise in response resulting in some crazy long portrait view.

There goes responsive design - out the window literally. If you've built your site using @media queries and fixed viewport sizes, Internet Explorer completely screws you in this split view. On my 1080p monitor, the site shown at a little under half width becomes completely unreadable as the fonts are too small and break up. As you go into split view and you resize the window handle the content of the browser gets smaller and smaller (and effectively longer and longer on the bottom) effectively throwing off any responsive layout to the point of un-readability even on a big display, let alone a small tablet screen.

What could POSSIBLY be the benefit of this screwed up behavior?

I checked around a bit trying different pages in this shrunk down view. Other than the Microsoft home page, every page I went to was nearly unreadable at a quarter width. The only page I found that worked 'normally' was the Microsoft home page which undoubtedly is optimized just for Internet Explorer specifically.

The workaround for this behavior is by using a custom IE specific CSS style:

@-ms-viewport{width: device-width !important}

This works to bring back the device width to what it should be which looks like this:

But it's terrible that a) you have to specify a custom style when the browser can already glean this behavior from the browser's ViewPort tag that IE desktop and every other major browser supports just fine and b) the fact that Windows Phone will not render this tag correctly.

Yeah you read that right: Windows Phone also requires a the @-ms-viewport style to render non-scaled content properly, but it uses a different setting.

In order for Windows Phone not to zoom the window you need:

@-ms-viewport{width: auto !important}

Again. REALLY Microsoft? You can't even make your own devices behave in the same way, even when you create hacks to make it work in the first place? So you want to guarantee that people will fuck up display on your devices? Nice work then. You have 3 different mainstream browsers and every single one of them behaves differently with only full desktop IE doing the right thing.

The only way to make this work now is by using some JavaScript and browser sniffing.  Pathetic!

Bottom Address Bar opaquely overlays Content

Another problematic feature for me is the browser address bar on the bottom. Modern IE shows the status bar opaquely on the bottom, overlaying the content area of the Web Page - until you click on the page. Until you do though, the address bar overlays the bottom content solidly. And not just a little bit but by good sizable chunk.

In the application from the screen shot above I have an application toolbar on the bottom and the IE Address bar completely hides that bottom toolbar when the page is first loaded, until the user clicks into the content at which point the address bar shrinks down to a fat border style bar with a … on it.

Toolbars on the bottom are pretty common these days, especially for mobile optimized applications, so I'd say this is a common use case. But even if you don't have toolbars on the bottom maybe there's other fixed content on the bottom of the page that is vital to display.

While other browsers often also show address bars and then later hide them, these other browsers tend to resize the viewport when the address bar status changes, so the content can respond to the size change. Not so with Modern IE. The address bar overlays content and stays visible until content is clicked. No resize notification or viewport height change is sent to the browser.

So basically Internet Explorer is telling me: "Our toolbar is more important than your content!" - AND gives me no chance to re-act to that behavior. The result on this page/application is that the user sees no actionable operations until he or she clicks into the content area, which is terrible from a UI perspective as the user has no idea what options are available on initial load.

It's doubly confounding in that IE is running in full screen mode and has an the entire height of the screen at its disposal - there's plenty of real estate available to not require this sort of hiding of content in the first place. Not only that but once you click on the content the address bar disappears and now you have to touch/click a tiny thin bar on the bottom of the page to bring back the address bar. What's the most common thing you do in a browser? Navigate and type/change URLs? You've just made this twice as hard as it should be on a desktop browser (or even tablet) where browser height constraints are rarely an issue.

Heck, even Windows Phone with its more constrained size doesn't hide content - in fact the address bar on Windows Phone 8 is always visible.

What were they thinking?

Every time I use anything in the Modern Metro interface in Windows 8/8.1 I get angry.  I can pretty much ignore Metro/Modern for my everyday usage, but unfortunately with Internet Explorer in the modern shell I have to live with, because there will be users using it to access my sites. I think it's inexcusable by Microsoft to build such a crappy shell around the browser that impacts the actual usability of Web content. In both of the cases above I can only scratch my head at what could have possibly motivated anybody designing the UI for the browser to make these screwed up choices, that manipulate the content in a totally unmaintainable way.