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?

Solution 1

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

Solution 2

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;
}

Solution 3

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.