Chrome scaling causes CSS positioning issues

Question

When I zoom in or out on my web page in Google Chrome, positions that are precisely positioned relative to each other will change. This causes a lot of problems: for example, at certain zoom levels, the div will overlap its containing div only enough to hide the border. Similarly, sometimes a 100% marker will not exactly correspond to a 100% point.

Is there any way to guarantee that the positioning of the elements relative to each other does not change when the page is enlarged or reduced?

Answer 1

You can use em positioning, which will vary and vary depending on the font size. Therefore, when people like management + or command +, then the page will automatically change. Here is a page on elastic layouts. Hope this helps.

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

Answer 2

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

For instance:

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

Answer 3

Although this is an old topic, I came across this problem. Fixed by adding shell containers to "elusive" elements. Therefore, before trying to fix the css element, perhaps check and make sure that the content wrappers first.