Browser Zoom - Why Does It Break Your Page And How To Avoid It

The current situation

The major browsers offer the option to zoom the entire page rather than just increase the font size. This is an important accessibility feature, which is often used not only by people with vision impairments, but also by users that, for different reasons, need to see the page smaller or larger.

Usually we zoom to increase the font size but, since the browser zooms the entire page, visual glitches could appear when the layout is based on background images and/or sprites. It will not ruin the page accessibility but will leave a feeling that the UI is not structured very well. And we don’t want that, right?

The root cause of the problem

The described behavior can be seen, for example, in Telerik’s ASP.NET AJAX Dock control and ASP.NET AJAX Window. They are not exceptions; you’ll see this problem with almost every HTML component that uses background images. These two ASP.NET AJAX controls are based on a table layout and background image sprites, which causes more visual glitches than simpler, modern layouts when the browser is zoomed, so I will be using them as an example:

Zoom 100% (normal case)

Zoom 105% (one of the most common issues, often caused by Ctrl + touching the mouse wheel)

Zoom 125% (when the pages is really zoomed so you can read the fine print)

You can see that the zoomed parts do not look very nice - the backgrounds are “leaking” a little and seem disarranged. This happens because the background image is rasterized and, when zoomed, it cannot stretch evenly with the other parts of the page. I will not fall into mathematical explanations why this happens, because what is more important is the simple fact that we have to deal with it.

This zooming problem can be seen in a lot of pages all over the Internet and we have often been asked for a way around it. A major part of the problem is that each browser zooms in a different way and we can’t provide a global, easy to implement workaround. If there was one, we would, there is no question about that. Thus, the usual and correct answer is that this is a browser behavior and we can`t control it. Well, there are a few neat tricks, and if you want to play we could give you some good ideas

What can be done – take the CSS3 way

In the pre-CSS3 era it was a real pain for the Front-End developers to create funky, nice looking layouts with rounded corners and shadows, as it required a lot of extra HTML, fiddling with many CSS properties and background images. To make things worse - this does not really increase the usability and accessibility of the page. It was merely improving the visual parts and wasting time to create code that is not really useful and is often over 70% of the final HTML/CSS.

With that history lesson done, you could ask why we are still using such old and heavy rendering. The answer is very simple, yet very uncompromising – cross-browser compatibility.

Luckily, CSS3 came and since March 2011 (when Internet Explorer 9 was released) we could say that all major browsers support at least the most common CSS3 properties - border-radius and box-shadow. It wouldn’t be too much to say that this gives front-end developers really interesting and unlimited opportunities. If only we could take advantage of them in all cases…

Actually, with Q2, 2011 we released the ASP.NET AJAX Notification control, which is visually similar to the Dock and Window .The key difference is that the HTML is semantically structured and CSS3 is used to apply shadows and rounded corners. This makes the control really light and simple, because the background images are reduced to the sanitary minimum. Of course, Internet Explorer 6-8 users will not see shadows and rounded corners, but this will not be too problematic as this is just a visual improvement and not functional. You may have also noticed how nicely it zooms in the screenshots above.

The Fun Part

With a few lines we could remove the background image sprite from RadDock and then by using CSS3 we can add rounded corners and even shadows, which actually are not part of the original. I love to use CSS3, so it was really fun to rework a little the control. I will not explain in detail all the modifications as they will vary by the specific control/HTML rendering, yet below you can find the code I conjured up.

The quirky bit in this case is that when border-collapse is set to collapse, the border-radius property will not work properly in IE9. So, it was necessary to set the border-collapse to separate and border-spacing to 0 to reduce the cell spacing. Originally, background images (actually a sprite) are used to visualize borders and now we have a real CSS border applied to the wrapping table element, so we have actually increased the real height with two pixels.

You can see the final result of this experiment in the picture below - the page was zoomed at 105% and 125% in Internet Explorer 9 and the Dock does not have the visual glitches seen in the previous screenshot.

Zoom 105%

Zoom 125%

What we have now is a RadDock and a RadNotification that use CSS3 and look nice and a RadWindow that uses background images and exhibits the same glitches we’ve been talking about.

How it was done

As promised, here is the actual code:

To be honest, our Front-End guys helped here, so kudos to them :)

You can even download the simple page we used to generate the screenshots - just click here.

Still having problems?

As you can see, not all issues were resolved, e.g. when zoomed in, the command buttons (which are also placed into a sprite image) are getting blurry since they are rasterized. Fear not, there is a way around this, too - Resolution Independence With SVG by David Bushell looks deeply at Scalable Vector Graphics (SVG) and gives good examples on how to use vector graphics in the web and keep your pages zoom safe.

In a nutshell

Taking advantage of the latest technologies is always cool and we would do it, if we could. Support for old browsers still has very high priority and we cannot simply abandon them. This is something we value as much as you do.

Share your workaround with us

You, the customers, are important to us, and we will be happy if you share with our community the different workarounds related to the browser zoom and background images that you have found. You can not only help a fellow developer, but also learn a few nice tricks.