Why does webkit's (Safari / Chrome) page zoom break a fluid layout on zooming out

I have a web site that has had a fluid layout for years. That is the body's text size is defined and from there all other sizes are relative and are specified in terms of ems. This made the page fully scalable on IE 5.5 upwards, old FF versions etc. Nowadays it isn't really that important anymore since in modern browsers there is page zoom opposed to text zoom. Page zoom works on all browsers for 开发者_StackOverflow社区me IE, FF, Opera and zooming in works on Webkit based browsers, too. But zooming out (to less than 100%) breaks the layout and I don't understand why that is.

here is an example page from the page as it stands to try this:

Why does the layout break in Safari (I used 5.0.5 to test) and Chrome when zooming out? In Chrome it works for like two steps of zooming out and then breaks. There is little use to zooming out so this is more of an academic question I guess. I'd like to understand what's happening.

Thanks.

It's might because of some default browser styles that are based on px instead of ems. For example, if you use the webkit inspector in Safari <ol class="navi_rechts"> has a user agent stylesheet that includes -webkit-padding-start: 40px. It might be worth using a CSS reset or checking for things like this on any messed up elements.

EDIT It may also be a rounding issue with some of your values. I'm not sure how many decimal places Safari will look at, but I'm guessing things like padding: 0.46154em 0em 0em 0.92308em; on h1.navi_parent_rechts might be too specific.