Zooming on Chrome causes CSS positioning issues

Question

When I zoom in and out on my webpage in Google Chrome, items that are precisely positioned in relation to one another will change position. This causes many problems: For example, at specific zoom levels a div will overlap its containing div just enough to hide a border. Similarly, sometimes a 100% marker will not precisely line up with the 100% point.

Is there any way I can ensure that the positioning of the items in relation to each other will not change when the page is zoomed in or out?

Answer 1

Although this is an old topic, I stumbled upon this problem. Fixed by adding wrapper containers to the "elusive" elements. So before trying to fix the element css maybe check and make sure the content wrappers first.

Answer 2

You can use em positioning which will reposition and size based on the font size. So when people do like control + or command + then the page will auto resize. Here is a page about elastic layouts. Hope this helps.

http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Answer 3

In my experience, using a left: px value and a top: px value compared to left/bottom right/bottom or right/top seems to do the trick. This applies to both Chrome and FF, can't comment on IE.

For example:

#my-element
{
  list-style-type: none;
    position: fixed;
    left: 54px;
    top: 40px;
}