Chrome, CSS - zoom sensitive layout
css, google-chrome, zooming
Solution
First of all, you're using a background-image, something I would have loved you to have mentioned.
1) So yah, as mentioned in the comments below your post, it's just rounding errors of the div, which crops the background-image.
2) I have no sources sadly, but in my experience, objects using text as a measurement are zoom-sensitive, pictures sometimes not zooming relative to everything else, and content with a predetermined 'set' size (such as textareas, radios buttons, etc).
3) Nothing is bullet proof, especially with something as ever-changing as the web that also behaves differently on different browsers. Hazards of the trade.
Problem
Setup: I have a simple box with rounded corners, that has a header and expands according to the amount of text, as discussed in Dan Cederholm's Bullet Proof Web Design (ISBN 0-321-34693-9). Works great, EXCEPT when zooming in Google Chrome. Then the right margin of the box disappears. It works in IE and FireFox without problems. Example: Example in jsFiddle In chrome, it fails at zoom 110% and other zooms too. No problems in IE or FireFox. Questions: Any ideas what is causing this? In general, what makes layouts zoom-sensitive (if any such general rule exists...)? Is Dan Cederholm's book really bullet proof...?