The problem with IE7 zoom

The one feature of IE7 that seems to have received almost universal praise is the ability to zoom a page. However, although I generally like this feature it does have one frustrating problem.

If you haven’t seen this functionality yet then I should explain this is more than simply scaling the text size. Zooming scales the entire webpage (graphics and all).

The idea, originally invented by Opera, is an excellent one. Generally speaking it allows the user to scale any site without breaking the design.

It works particularly well for fixed width sites as it allows the user to expand the design to fill the screen when running at higher resolutions.

So this:

Screenshot of Headscape at 100% zoom

becomes this:

Screenshot of Headscape at 175% zoom

Not perfect, but pretty good.

However, the problem comes with scalable sites. Because these already fill the whole width of the browser window, as soon as you begin to scale the content on the right of the page gets pushed off screen like so:

Screenshot of boagworld when magnified

This wasn’t a problem with traditional text resizing because only the text changed size and not the surrounding layout. This new approach is actually a step backwards for the accessibility of scalable sites.

Although it is possible to just resize text in IE7, this option is nowhere near as prominent as the zoom function and so will almost certainly become obsolete. The question is, will this cause scalable sites to become obsolete as well? It will certainly make me think twice before suggesting them to clients.

  • Ruth

    Microsoft strikes again! :o/

  • http://www.stillmoments.me.uk Connor

    It broke my design when it strunk it.
    sulk

  • Josie X.

    Does this happen in Opera?

  • http://www.captainjones.net Lee

    Maybe people should find something else to fill up thier big monitors. It sounds like all my scalable sites will be screwed up with IE7 zoom, but changing to fixed width will make them a poor experience for everyone else. I wonder if this zoom feature will be popular…

  • Scott

    No- Opera does what you would want a zoom to do! Basically the same as the IE6/Firefox zoom functions, but also scales images.
    I would guess that there would be some sort of workaround involving container divs, and how they are sized. I mean, Microsoft wouldn’t bodge their new browser that badly, would they?
    Would they?…

  • Simon Brookes

    Lee can you explain to me why you think designing fixed width sites will produce “poor experience for everyone else”? I’m afraid I don’t agree but am keen to hear your arguments.
    Thanks
    Simon

  • http://www.norabrowndesign.com Nora Brown

    Microsoft is really doing their best to stick it to us web designers. The worst thing is that you can do text-only resizing in IE7, but the keyboard shortcuts are attached to the overall zoom function, so most people will never discover that. Once again Microsoft has shown that they don’t even bother to test their own products in the real world before sending them out the door.

  • Jez

    The one issue I have with this feature is: having zoomed in on the page; how do you get back to 100% again?
    Ctrl+0 doesn’t work! This is the way I do it in Firefox.

  • http://f6design.com/journal/ Jonathan Nicol

    Jez: Ctrl+0 works for me…
    I like the fact that zoom allows users to scale your site without breaking the layout. But I think it is not good that Microsoft have chosen to use the same shortcut keys (Ctrl +, Crtl -) as Firefox uses for resizing text. A little consistency please… Sheesh.
    As for a zoomed page requiring horizontal scrolling – I just consider that’s an inevitable consequence of this technique. If you double the size of a web page – even a fixed with page – there is a good chance it’s going to exceed the width of the browser window.
    I don’t care much for scalable layouts anyway (sorry Paul!). I’m one of those people who run their browser window at full size, so scalable pages look very wiiiiiide to me.

  • http://www.captainjones.net Lee Jones

    Thanks for the question Simon. I guess I got a little carried away saying “it would be a poor experience for everyone”, but I was thinking that the IE 7 zoom feature makes flexible width designs become a liability since they don’t display correctly. When a designer or client wants the advantages of a flexible width site design, the current IE 7 zoom feature would stongly deter that choice and everybody loses the benefits including the users. It sounds like this problem is another advantage to using fixed width design.

  • justin

    Mac OS X has zoom built into the operating system. This also solves the problem and I like that you don’t have to scroll, the screen just follows the mouse.

  • http://levade.homeip.net/addicted MArc

    In Opera it doesn’t stretch the page past 100%.

  • anthony

    I find the zoom annoying as I’m used to holding control and scrolling the mousewheel to enlarge text.
    Although in other Microsoft application i.e. Office, this key/mouse combination does the same thing, zooms the displayed document so i guess they are just being consistent.

  • http://www.expansionbroadcast.com Eric

    I agree with Lee Jones. Whether it be in the form of a text resize or full on zoom function, at some point or another your design isn’t going to look like it was intended. I think we need to look past the aesthetics sometimes and worry about the end result. Does zooming produce better results for someone with a visual disability than regular old text resizing?
    And for that matter, has there been any studies done on this?

  • Jay

    Wonder if anyone can explain how to keep the zoom feature permanent. In other words, every time I zoom to 105%, once I close IE7 and return, it’s back to 100%. Is there a workaround? thanks

  • Drew

    Another problem with the IE7 implementation of zoom that we recently stumbled across is that it won’t scale background images set on the <body> element (at least not with the XHTML trans. doctype that we’re currently forced to work with.)
    Opera does this fine but IE7, seemingly not.

  • http://jackyan.com/blog Jack Yan

    My problem is that IE7 zooms without my ever asking it to. Sometimes it zooms out, sometimes it zooms in. But it does it at will.

  • http://rightbuttons.etsy.com/ ScottM

    I like the zoom feature. I have a 15-inch LCD monitor which has to be set at 1280×1024, so I keep my text size set to “largest.”
    Unfortunately, a lot of page designers use stylesheets to force text to display at a tiny size regardless of my settings. It was generally (though not always) possible to work around this through the accessibility options, but it was a pain and often screwed up the page layout. There were some pages I wouldn’t even bother reading.
    Now, I just use the zoom tab on my keyboard. Although this does sometimes involve shoving graphics and side columns off the side of the screen, I’ve never had a page where the text I wanted to read did not fit within the screen at a readable size.
    The only problem I’ve had is that on some pages, setting the zoom sends the browser back to the top of the page, which is annoying.

  • http://www.graphicsworkshop.net Paige Howarth

    I’m having a heck of a time with this new zoom feature. I made a css dropdown menu for a client’s site, and now the drop-downs detach from the menu when you scale up. In short- when you move the cursor over a drop-down button, the thing disappears! (The reason is my menu contains bg images.)
    Just another IE headache.

  • http://www.reedyriver.com H. Hall

    The following solves a lot of problems, but not all.
    Put this in affected styles:
    zoom: 100%;

  • Niko

    I think it’s easy to make a layout which makes use of available screen estate in a useful way. That means, 100% of a pages width is used. IE7 breaks this. Now we allways have to think about ppl surfing with 125% and use only 80% of the available width just that those ppl don’t get a horizontal scrollbar. That’s BAD!

  • LK

    This feature breaks some of my layouts. It doesn’t zoom normally, like photoshop would resize an image, but for some reason resizes different elements at different rates, breaking apart my web pages.

  • Dave

    I think it would be rather foolish of Microsoft to completely replace the old text resize option with this zoom feature.
    If they were to just use the zoom feature, it would seem ideal to have an option within that, so that the user can choose for themselves whether to zoom the whole page, or just enlarge the text/images.
    This is obviously just my opinion, but lets see what Microsoft choose to do in the future, eh?

  • http://hanako.jchap.net Jeff Chapman

    One of the most prominent issues about IE zoom that it seems we’re not addressing is the fact that bitmap images (GIF, JPEG, PNG) are typically designed by web designers to look good at 100% zoom level. Designing them to look good at higher resolutions means more pixels, which means a heavier image data-wise.
    Opera has the same issues, really. Bitmapped images, especially photos and graphics with sharp edges typically look grainy when zoomed. The more you zoom, the worse they look. In effect, there really is no merit or benefit to zooming in on bitmapped images that have been trimmed and resized for the web.
    I personally would like to see some kind of toggle on the IE zoom feature, so that the user could choose to use it to only enlarge or reduce text and not the images on the page.

  • Suzie F

    Thank you, Jeff! I read this whole string and finally found someone concerned about pixels like me. My site isn’t busting apart with this ridiculous zoom, put my pixels are. I hate Microsoft. Are they idiots or what?????

  • http://hanako.jchap.net Jeff Chapman

    Yeah, I really don’t understand the thinking behind their current zoom implementation either. IE7 shows noticeable improvements over its predecessor, but zoom implementation is not one of them.
    Perhaps the IE developers thought that users wouldn’t care if bitmapped images got a little grainy-looking at higher zoom levels, just so long as the proportions of the elements on the page remained intact.
    I wonder about SVG images, however, whether the IE zoom feature affects them or not.
    Apparently background images set using the CSS background property are unaffected by zoom.

  • Suzie F

    Thanks for the tip on the CSS background. I might experiment with the SVG’s to see if they’re affected. . . I’ve been saving my vector artwork for web as a jpg or gif, but if this continues to be an issue, I’ll use the vector files.
    Does the implementation of this zoom thing mean that no one is concerned with band width any more? Am I supposed to save my images without compression so that if some zoom junky wants to scale my page up to 5000% the artwork won’t pixelate? Cuz that’s what I’m getting. . . pixelation.
    A buddy of mine waxed hopeful that someone, somewhere will eventually write a script that will hold larger files to be called for upload when the user chooses to zoom a page. It seems like a lot of extra work for nothin’. If people have trouble reading the words on the screen, they can adjust their darn display. 800×600 coke bottle specs!

  • http://hanako.jchap.net Jeff Chapman

    I wouldn’t advise just going all SVG… most browsers require an SVG plug-in, and SVG is not going to do much for you in terms of improving file sizes for photographic and raster-based images.

  • Suzie F

    Of course, you’re right. I hate Microsoft. Oh, did I say that already?

  • Linda DD

    Many of My elderly customers think this Zoom feature is great – because the whole page does stay the same, just scaled bigger.
    The text function actually causes them problems because much of the text gets “lost” behind the formatting and the whole page becomes very confusing to look at. So this does not solve their problem. Changing resolution to 800×600 also does not help because these days many web sites are written at higher resolutions, and much is lost on the right, and because scrolling on all pages would be frustrating.
    However being able to selectively zoom when you find information you need to read in detail is great.
    Bravo to a feature of IE which actually does help a lot of people!

  • Suzie F

    I think it’s great that people who have impaired vision are finding it easier to surf the internet. But the problem is, I’ll bet they don’t “selectively” zoom in on things here and there and then go back to 100%. They jack up the zoom to their comfort level and leave it.
    The zoom is a good idea in theory, but in practice it wreaks havoc on website designs. Microsoft is notorious for implementing these “cool new features” in their products without knowing whether the bloody things will even work. They seem to blissfully ignore industry standards and just build stuff for the “Microsoft Club.”
    Well, I for one am going to work hard to get my client’s entire office to load up Mozilla.

  • Frank

    Once again, Microsoft ripps an idea and cripples it.

  • http://notawebdesigner.com Maj

    I agree wholeheartedly with the original comments on IE’s new zoom implementation. The combined zoom of text & images is a fantastic feature and it’s becomming more a neccessity as the DPI of displays increases (I’m writing this on a 15inch 1920×1080 laptop). The pixelation of images is acceptable – no free lunch expected. The handling of IE’s zoom on variable width site is definately poor – please Microsoft if you’re listening can you fix it!

Headscape

Boagworld