Internet Explorer 8 and Adaptive Zoom

Hi! I am Saloni Mira Rai, a program manager on the Layout team, and I’d like to walk you through the changes in Zoom for Internet Explorer 8.

Zoom lets you enlarge or reduce the view of a web page to improve readability. The feature is particularly useful on really large and really small displays, allowing for scaling of content while maintaining the intended layout of the page. The second iteration of the zoom feature (first shipped in Internet Explorer 7) focuses on improving the existing experience by providing a higher quality, more predictable, and persistent zooming experience.

What You Can Expect

As you zoom, IE8 will size the text and images and reflow the page to make it easier to read. You will not see a horizontal scrollbar for most mainstream scenarios. It’s easier to show than explain, so here’s an example:

Zooming the IE Blog to 150% in IE7 looked like this:
Notice that text moves off the screen and a horizontal scrollbar appears at the bottom of the screen.

IE7 Zoom

Here is the same page zoomed to 150% in IE8 Beta 1:
Text is now being wrapped and no horizontal scrollbar is needed.

IE8 Zoom

Digging In A Little Deeper

NOTE: This section is for readers who want to understand the internal workings of Adaptive Zoom, and how it might affect site design.

Internet Explorer 8 Adaptive Zoom is founded on the concept of scaling elements pre-layout. This is significantly different from Internet Explorer 7 Zoom behavior, which was analogous to “magnifying” the webpage – elements were scaled post layout and then re-drawn on screen.

Due to this important change, horizontal scrollbars are introduced only when the fixed width of the scaled content is greater than the width of the viewport. This is exactly like resizing regular layout on an un-zoomed webpage.

Also, text wrapping is affected by this change. In IE7 Zoom, line lengths and line breaks were not recalculated as the zoom factor increased / decreased. This led to situations where text lines were either too small (resulting in lots of white space) or too large (resulting in text runs that would go off the screen, requiring horizontal scrollbars). In IE8, line lengths are recalculated based on available space before the text is rendered on screen. Then, line breaks are inserted all the while taking the new lengths into account.

In addition, it is important to understand how common page elements and properties respond to zoom.

  • Fonts and text: The glyph itself is not scaled. Rather, the font size is scaled and then the appropriate glyph is used. The important thing to note is that fonts do not scale linearly by design. For example, if text at 12pt is scaled to 110%, the resulting font size is calculated as 13.2pts. However this font size does not exist, therefore it is rounded to the nearest available size – 13pt.

  • Fixed, auto and relative sizing: Dimension scaling is one of the most important improvements in IE8’s Adaptive Zoom. Dimensions specified using absolute units (e.g.: in, cm, mm, etc) or device and font dependent units (e.g.: px, ex, em, etc) are scaled as per the zoom level. Therefore, at 200%, 100px becomes 200px and 20pt becomes 40pt.
    Content-dependent dimensions, i.e. percent and auto, are not scaled as they are computed during layout. Therefore, at 200%, a width of 50% of the viewport does not become 100% of the same. This is a marked change from Zoom in IE7.

  • Positioning: Positioned elements grow and shrink like in-flow elements. However their new position is determined by the properties set, and the offsets used.
    An absolutely positioned element, if offset to the left by 100px, will shift towards the right when zoomed in. It is possible for it to go off screen.

Similarly, floats will be positioned with respect to their container as per the normal rules of CSS. If the width of the container changes with zoom, then the position of the float will change. Zooming of adjacent floats is exactly like resizing the window – if the width of the viewport is not large enough to accommodate the floats, the last one in markup will drop to the next line.

  • DHTML properties:  In IE7 zoom, some properties were treated as physical (e.g.: mouse coordinates) while others were logical (offset). This implementation essentially required web developers to be aware of or manually calculate the zoom state based on the property being used. In IE8 zoom, all DHTML properties are now assumed to be logical. This enables some key scenarios such as fly-out menus and “drag-and-drop”. There are a few known issues, such as the incorrect scaling with screen.width and screen.height, that were not addressed in Beta 1. These will be fixed in a future release.

For more details and information on the scenarios mentioned above, and additional scenarios, such as those involving overflow, tables, etc., please see the Windows Internet Explorer 8 Beta 1 for Developers: Technology Overview.

Getting Your Site Ready For Internet Explorer 8 Zoom

Web developers should not expect to write any special code for adaptive zoom. Since all properties are logical, and scaling is purely internal, developers do not even have to be aware of zoom.

If you are interested in improving your site user experience with zoom, I recommend you test your site with different zoom factors, resolutions and window dimensions. Here are some initial things to think about as you do this:

  • At what point do horizontal scrollbars appear? Does the user need to scroll to read a single line of text?
  • Does content quickly go off screen because of fixed sizing and positioning?
  • Does the overflow:hidden value on any elements make content inaccessible?
  • Do fly-out menus adapt to available screen real estate, or do options go off screen making them inaccessible to the user?

Thanks for reading and I look forward to your feedback!

Saloni Mira Rai
Program Manager

Comments (58)

  1. Doug says:

    Sometime a magnifying zoom is the best such as when I want to zoom in on the RADAR weather page image.

    Other times the adaptive zoom sound great so that I can read the page by scolling down with not side scroll.

    Would it be possible to have easy access to both styles?

  2. Ravi Rao [MSFT] says:

    @Doug – No, IE8 Beta-1 is capable of only using adaptive zoom.

  3. nice but says:

    Very nice conceptually, but it fails horribly in many cases.

    take DIGG.

    a very popular social site… zoom in one level (125%), and the site is ENTIRELY UNUSABLE!

    The main headers alone take up about one vertical browser page…

    I hope that the first Beta (IE8 Beta 1) is just that… a BETA… not representing the final release at all.

  4. Arieta says:

    Improved Zoom is one of the things I like the most in IE8b1, especially the part that it doesn’t re-draw the whole page and wrap to the top in some cases. (I think IE7 did that with Wikipedia, but I’m absolutely not sure, it was only an annoyance I never payed attention to)

    The thing I dislike with zooming, with its current implementation, is the magnification of images. It looks as if a simple point-order magnification is done, without any (or without any decent) image filtering. This looks very bad; it would be good if we had an option to change the zoom algorythm to use bilinear or bicubic (or exact unfiltered, for pixel art) resampling for improved quality on image zoom.

    This is the most visible on animated GIF files, which look absolutely horrible in the current implementation. Beyond the normal quality issues, the animation also breaks up and frames blend incorrectly. You can chalk this one up to the horrible anigif handling of IE, I guess, you guys really need to rewrite the image rendering code (png and jpeg are not perfect either – missing png gamma, and progressive rendering).

    The other problem with zooming to images is speed. Try zooming into a wallpaper sized image, and ie7 (and ie8b1) slows down to a crawl. Other image editors (even MSPaint!!) can do smooth magnification without hardware acceleration: why can’t IE do this? Furthermore, why doesn’t it use hardware acceleration to begin with? It’s one of the things Vista is good for, and it should be built upon, in my opinion (you can just leave it out from XP, making it default to GDI, or it could default to GDI rendering if you launch IE in no-addon mode).

    Good job on the improvements you made so far, I really hope you can make more: IE is a dinosaur and you are doing great work at modernizing it. Theres just so many more parts that need revamping. Cheers.

  5. omg says:

    This scaling also totally ruins many layouts.

    If there is a fixed say 50px x 50px block, with a background image (50×50) set, when the page scales the background image does weird things.

    Compare the shopping cart icon on this page:

    In IE 8, vs. Firefox 2, Firefox 3, or IE7

    And change the zooom factor… in IE8, you end up with multiple shopping carts, but it works fine in all other browsers.

    If you are going to scale fixed pixel objects you need to enable some method to the developer to say "NO", this item is 50px, now, always, regardless of zoom.

    I agree the text wrapping is much better than before, but this is 1 step forward, 2 steps back in terms of progress from IE7.

  6. Saloni Mira Rai [MSFT] says:


    @nice but and @omg – Thanks for the feedback!

    These look like bugs in layout for IE8 Standards Mode. Try switching to ‘Emulate IE7’ mode and then zoom again. You will notice that these issues are no longer visible.


  7. Steven says:

    I think there is a big difference between zooming and scaling, and this seems to confuse the two.

    If designers wish for their pages elements to be scalable, they will specify in em’s. In Firefox, Wikipedia’s sidebar expands along with the text because its width is specified in a scalable unit (em).

    Other elements specified in pixels shouldn’t be scaled, because they were given a fixed size. In Firefox, Wikipedia’s logo doesn’t zoom, it stays at the same pixel size.

    Inches and other absolute measurements also can only be zoomed. You can’t scale an inch, or it’s not an inch anymore. However, you could zoom in on it.

    What IE is doing here is really a combination of zooming and scaling. IE7 only did zooming, and Firefox only does scaling.

    I realize a combination of the two may be needed to offer users real legibility on the "current" web, but if designers wish to have a legible site then they can specify it – IE needs to put more of the responsibility on the designer in this instance.

  8. Steven says:

    And another point – are you saying the "Emulate IE7" behavior of zooming differs from that of the actual IE7?

    If the Emulate IE7 engine is not identical to actual IE7, then we as designers are we going to have to now test IE6, IE7, IE8, and IE8-as-IE7.

  9. Henrik says:

    Does anyone know if this means that IE8 is using the same approach in their zoom logic as Opera and FF3?

    From what I know, Opera and FF3 uses the same technique, but that this is different from what IE7 uses. If this is the case, this would be a great improvement for IE8!

  10. Shannon says:

    @steven: Compare what you’ve said against Doug’s first comment – sometimes, zooming into an image is exactly what the user wants to do.  (Also, remember it’s the user that’s in charge, not the web desginer.)

    Besides, as DPI gets up, pixel counts will get less and less useful.  Designers should consider straight not using them.

  11. Mercedes says:

    les escribo por que trato de conectarme a una pagina de internet y no la abre. Hace 5 minutos pude abrirla y ahora no. La conexion esta perfecta y la pagina supongo que tambien por que hace 5 minutos la abri.

    espero una respuesta

  12. JD on EP says:

    IE8 Adaptive Zoom: This doesn’t seem like it will have a major impact on existing websites, but may be handy to be aware of ahead of time. Microsoft Internet Explorer 7 offered a "zoom" feature which scaled up the existing page… you’d usually have to

  13. A minor issue here when using the adaptive zooming: The IE RSS Reader makes the right pane non-scrolling (i.e. fixed), this behaviour is lost, however when zooming and the pane behaves as if it would have an absolute position. I suspect this may be the case with other pages as well that use position: fixed, though I can’t remember one that uses it currently.

  14. Will says:

    I actually like the magnifying type zoom.

    Both have their usefulnesses, would be great if both were available based upon user preference.

    As Doug mentioned, zooming in on certain images is a major factor in my preference for it.

    Also, some sites are designed with a certain "width" for content with "junk" surrounding it. I actually use the "page" zoom/magnification to increase the page size so the non-content parts need to be scrolled to if you wish to view it.

    Ravi, in your reply to Doug, you mentioned that IE Beta 1 is only capable of doing the adaptive zoom. Does this mean it’s possible we’ll be able to see both included in a future release?

  15. Arieta says:

    Steven: The Emulate IE7 button only affects the rendering engine. I’m using IE8b1 in IE7 mode and it scales pages instead of zooming. Not really a problem for me, since it works much better.

    What Saloni Mira Rai [MSFT] meant is that the layout is rendered differently in IE8 Standards mode, which causes different rules to apply in zooming, breaking the page if you zoom into it in IE8 mode. I’ve just tried, and indeed IE8 standards mode has serious layout issues if you zoom in the pages, while Emulate IE7 mode zooms perfectly fine.

  16. kL says:

    So basically it behaves just like Opera does since its earliest versions, before it got *really* adaptive zoom (Medium Screen Rendering) 🙂

  17. Gord says:

    So, if I design a site, to use 95% font size, with 2px padding, and a 1px border… how is IE8 going to zoom this?

    If it scales the text – great!

    If it scales my padding – NOT GOOD!

    If it scales my border width – NOT GOOD!

    If it scales the "box" that my text is in – QUESTIONABLY GOOD/BAD.

    Thus I’m not sure if I like this new zooming or not.

    I don’t think that there is a 100% perfect solution here.

  18. I use a 120 dpi screen. All images are "zoomed" badly in IE8 by default, so I usually click the zoom dropdown and select "Custom…" then "80%", this then seems to cancel out the 125% "zoom" that IE8 is doing.

    Unfortunately there appears to be no way to save this setting. Can you please add a default Zoom setting somewhere, even if it is just a registry key.

    It seems to me that this Zooming behaviour should be consistent across the OS and all other applications.

  19. J H says:

    IE8 is messing up too many webpages. I need to uninstall it and reinstall IE7. IE7 kept locking up in Vista and Vista SP1. Someone said it was because of some addons. Well, there are too many addons to figure out the offender. At least IE7 worked and did not mess up webpages like IE8. How do I uninstall IE8? I tried the usual method Add/Remove Programs but IE8 is not listed. Thank in advance.

    My email is

  20. MACMAN says:

    Excellent post!

    very well explained- thanks for fixing this !

    This is a significant improvement over IE7.

  21. jo says:


    Yes off course. In IE7 you also don’t have slices, etc. IE7 emulation ONLY emulates IE7 Trident.

  22. ajo says:

    This is a nice improvement from IE7 (when using IE8 in IE7 emulation mode). Looking forward to IE7 B2

  23. Xepol says:

    Personally not a big fan of the new zoom.  I much prefered the old IE7 zoom.

    At the very least, I would like to have the option between the 2 zoom modes.

  24. MIA says:

    I don’t have flash player installed in my computer so every time i visit a site that required flash i get a UAC alert about  Internet Explorer Add-ons installer for permission to install the flash add-ons. Can you add some kind of features to automatically stop the website from offering the flash player and triggering the UAC.

  25. Chris Hester says:

    IE8’s new zoom has a serious problem with the link below. The layout breaks a lot, with large gaps between lines of text and elongated banner images:

    Steven above wrote: "In Firefox, Wikipedia’s logo doesn’t zoom, it stays at the same pixel size."

    I think you must be using Firefox 2, which can only zoom text. In Firefox 3 the whole page zooms, including logos.

  26. Arieta says:

    Chris: That page has the same problem as Digg, use ie7 emulation for it…

  27. SysRq2000 says:

    I’m not sure if it already is or not, but I think that adaptive zoom should be an option and that ie7 zoom should still be available. IE 7 zoom is more generic and correct although adaptive zoom is more user friendly in most cases. To take an example…. If I use adaptive zoom on this page the images are cropped because the right-hand menu is overflowing them. This wouldn’t happen in ie 7.

  28. Brandon says:

    Excuse me?

    For all the folks chiming in here with "Use IE7 Emulation mode" – NO! NO! NO! NO! NO!

    The whole point of IE8 is we finally have a browser that is actually trying to fix its horrible non-standard implementations to make an almost standards based browser!

    The more people suggest that Emulate IE7 is a valid option, it completely defeats the purpose!  Not to mention, that in IE8 Beta 1 you have to restart the browser if you want to use IE7 mode.

    The whole emulate thing needs fixing fast (hopefully Beta 2) so that it can be triggered on the fly, and it can be applied on a site by site basis.

    Normal browsing -> IE8

    Stuck on sites that haven’t updated yet -> Downgrade to IE7

    Hopefully within a year of IE8 going live, the need for the emulate button will disappear, as developers ensure their pages are up to snuff.

  29. Jote says:

    Please provide legacy IE7 zoom as an option. Adaptive zoom is completetly unusable and it makes pages look broken. Do a search on and set the zoom to 50%. Item listing header background is broken, because the background is shrinked, yet the header itself retains its original width. If you set the zoom higher than 100% the text will overlap the images. I understand the concept of adaptive zoom (it’s great IMO) but it’s just plain not doable.

  30. mocax says:

    It’s only beta1 and has lots of bugs.

    I like Opera-style zoom, so I like IE8’s zoom 😀

    If I just want bigger text, I use the Text Size menu.

    If I want to scrutinize every pixel on a page, I press Win+U and magnify it.

    IE8’s image zoom is good, Firefox’s image resampling need a bit more work.

  31. orz says:

    Bug report!

    The gaps everyone is seeing have to do with line-height. If you zoom to anything other than 100% and the line-height is set to a number with no unit, for example "line-height: 1.2", the line height grows to an enormous size.

    IE Team: please fix!

  32. IE8B1 – Third best at this feature though it’s only the first beta. There are some moderate bugs with this feature effecting my site (at my site at the top right click "Site Options") where as some zooms will reorganize the percentage width based icons on the prompt in IE8B1 (Chat Room, Console, Contact, Options~Themes etc).

    Minefield (Firefox 3 Nightly Builds) – There are absolutely no bugs that I have noticed though I’m not saying this to be rude, it’s just further along in it’s current development cycle (of about three years I think for Gecko 1.9?)

    Opera 9.5 Beta – Second best at this feature though there is some element tearing in regards to the labels/input text elements on my site’s side bar when zooming though overall it looks fair (though a bit rough).

    Safari/Webkit – The text gets larger but layout elements remain the same size so dynamic sites like mine look all screwy on even the first zoom!

    It’s just the first beta and I like the direction you folks choose to pursue with this feature which is very intuitive. There are some bugs so I’m hoping that IE8 final zooms like Minefield is currently as it’s the only browser currently doing it correctly on my site. Good work so far with this feature. 🙂

  33. Dean says:

    Not too bad for a first draft, but the zoom needs lots of work still.

    Its a good effort so far, hopefully most of the fixes will make it into Beta 2.


  34. How can I download and install internet Explorer 8 and Adaptive Zoom?

  35. Harel Williams [MSFT] says:

    @Luis: You can install IE8 Beta, which includes Adaptive Zoom, at

  36. Saloni Mira Rai [MSFT] says:

    @Luis Figuerado

    You can download IE8 Beta 1 from For more details on installation please see

    You can use adaptive zoom via one of these ways –

    1. UI Control in the bottom right corner of the status bar

    2. Hotkeys – CTRL + SHIFT + = for zooming in by 10%; CTRL + SHIFT + – for zooming out by 10%.

    3. Hold down CTRL and then use your mousewheel to zoom in/out

    4. Access the zoom menu via the page command, or the view menu on the menu bar.


  37. bob says:

    xlIBx5 hi super site thanks

  38. J H: As the Internet Explorer 8 Installer told you, you can find IE 8 under "Installed Updates" to uninstall.

  39. giz says:

    Can you add a feature to auto-hide the status bar and make it appear when mousing over or clicking a keyboard button. Similar to Auto-hide taskbar in Windows.

    I think the RSS feeds icon should be move next to the add favorite icon.

    adding, removing or changing homepage is so easy in IE 7 without going through IE option or UI box. The instant search should have the similar features so user won’t have to go through the UI box


    What needs to be done is really simple, yet different from the current implementation:

    1. magnifying zoom – for pictures and for separating content from junk as Will explained above.

    2. Full user control over text-size.

    Jakob Nielsen wrote about this almost six years ago:

    "IE4 had a great UI that let users easily change font sizes; let’s get this design back in the next generation of browsers."

    Please LISTEN to him. He knows what he’s talking about.

    Two buttons – "Grow font (Ctrl+>)" and "Shrink font (Ctrl+<)" – just like in Word (2007) – it’s that simple!

    Make sure it’s infinite – sometimes "Largest" simply isn’t "large enough". And with the

    I’m not aware of any other browser that provides both of those features.

    To sum it up: IE8 will rock if it provides these two really simple, already implemented *separate* features – magnifying zoom and text-size control. Just Do it.

    Have a nice day

    Further Reading:

    Let Users Control Font Size

  41. Martin says:

    Why does IE only support CSS-import in 4 levels?

  42. Jan says:

    If I zoom in IE7, the webpage scrolls back to the top of the page. I hope this is fixed in IE8.

  43. Pauw says:

    The thing I dislike with zooming, with its current implementation, is the magnification of images. It looks as if a simple point-order magnification is done, without any (or without any decent) image filtering. This looks very bad; it would be good if we had an option to change the zoom algorythm to use bilinear or bicubic (or exact unfiltered, for pixel art) resampling for improved quality on image zoom.

    This is the most visible on animated GIF files, which look absolutely horrible in the current implementation. Beyond the normal quality issues, the animation also breaks up and frames blend incorrectly. You can chalk this one up to the horrible anigif handling of IE, I guess, you guys really need to rewrite the image rendering code (png and jpeg are not perfect either – missing png gamma, and progressive rendering).

  44. I just UNINSTALL-ed it. It showed 90% of the web wrongly! Really bad.

    long live firefox/opera/k-meleon

  45. Timothy says:

    I miss my inline autocomplete.  Sigh… Please bring it back!

  46. Al says:

    @Arder/Beni Dhomi – This is why they call it Windows Internet Explorer 8 Beta 1 for Developers: Technology Overview. Note the "fot Developers" and not "for Users" 🙂

  47. Al says:

    @Arder/Beni Dhomi – This is why they called it Windows Internet Explorer 8 Beta 1 for Developers: Technology Overview. Note the "fot Developers" and not "for Users" 🙂

  48. <div onclick="alert('XSS')">onunblink</div> says:

    Nice to see another great feature being copied.

  49. Cecil Ward says:

    As Jordan Biserkov said earlier, I’m not at all sure that the decision to switch to new behaviour here was the correct one.

    Firstly, in IE7, the old function View|Text Size was still available, and very usable it was too. The IE7 Zoom did exactly what it said on the tin, and complemented View|TextSize, in that it magnified the layout, so was available in cases where the layout became unusable if larger text size meant that text wrapped awkwardly in small columns or if layout broken in other ways.

    IE8’s new zoom behaviour is likely to deliver unusable layout on a number of sites so it will fail as a reliable accessibility enhancement. The results of such an algorithm are difficult for users to _predict_, which is bad from a usability point of view. (Functions should behave predictably in the UI.)

    Lastly, the new Ie8 zoom algorithm seems to me overlap View|TextSize’s use cases too closely now. Under what circumstances would users need to use this rather than simply use View|TextSize?

    Of course it’s a good idea to try to avoid horizontal scrolling. But I’m not sure that what you are trying to do is tenable.

    You need to think carefully about (i) what you lose in terms of reliability and predictability by making this dubious change wrt ie7, and (ii) test on small displays, complex multi-column layout.

    If this new feature were to be implemented _without losing_ the IE7-Zoom, then I would have no objection to the introduction this new algorithm. If, as I am arguing, there is no right solution, provide both and then let users decide on which function works for them on a case by case basis.

    From checking out a few well-designed sites, the feature is currently so badly broken that it is clearly not yet near ready to ship, so real testing is not yet possible.

    MS needs to think very, very carefully about this.

  50. Jote says:

    Cecil Ward – ditto, I couldn’t have worded it better myself.

  51. Joe says:

    The adaptive zoom seems pretty good overall (especially in IE7-mode), and vastly improved performance is greatly appreciated, but I personally prefer the IE7 style zooming, and thought it was one feature that stood out well from Firefox.

    If this were stuffed in as another checkbox in the Advanced settings dialog, I think we could all be happy on this one.

  52. IEBlog says:

    Hi, my name is JP Gonzalez-Castellan and I’m the Accessibility Program Manager for IE8. The IE team has

  53. 이 블로그의 좋은 점 중에 하나는 댓글이나 메일에서, 주제에 대한 세부 사항정보와 데이터에 대해 좀 더 깊이 있게 이야기할 수 있는 점입니다. 여러분의 질문이나 의견에 대해 보다 깊이

  54. 안녕하세요. 레이아웃 팀의 프로그램 매니저 Saloni Mira Rai 입니다. 이 문서에서는 Internet Explorer 8의 줌 기능 변화에 대해 설명합니다. 줌을 사용하면

  55. IEBlog says:

    As display technologies advance and the world begins to fully embrace accessibility on the web, the Zoom

  56. As display technologies advance and the world begins to fully embrace accessibility on the web, the Zoom

  57. News says:

    As display technologies advance and the world begins to fully embrace accessibility on the web, the Zoom

  58. Делая Сеть больше. Часть 1: улучшения в масштабировании По мере того, как совершенствуются технологии