Chrome, CSS - zoom sensitive layout

Question

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:

1. Any ideas what is causing this?

2. In general, what makes layouts zoom-sensitive (if any such general rule exists...)?

3. Is Dan Cederholm's book really bullet proof...?

Answer 1

How far back do you need to be compatible?

I mean, if you can drop IE7/8 you should be using css3 rounded corners. If you need to support IE8/7 you should definitely considder using graceful degradation in this case. It is probably not worth the time and effort to strive for perfection everywhere. That is simply a goal which cannot be met when browsers will never get updated again.

1) What may be causing this

That is a fairly broad question, I couldn't reproduce the problem, or really find one in Chrome 20 (beta) so I will just list a things that can mess it up.

• General browser rounding errors, browsers aren't precise, weren't designed to be precise sub-pixel
• Mixing px values with other values, different roudings make values add up differently..
• Positioning of in-flow elements which get influenced by other in-flow elements on the page (these are hard to track down usually)
• Parent element properties (parents with overflow hidden, fixed sizes, for example, I think this might be the problem here in the jsfiddle)
• Bugs in browsers
• Combination of the above

In this case jsfiddle has a crapload of containers and frames (with overflows set to hidden, fixed heights/widths, px based) etc on the page, even in 'full screen' view. So if you really want to make sure, make a html file on your own pc open/test with that.

2) In general, what makes layouts zoom-sensitive (if any such general rule exists...)?

In todays browsers this may not be all that relevant because zoom functionality is often very advanced and can even scale full-px based layouts without much problems. The only real problem browser which is still used today is IE7. The zoom capability of IE7 is atrocious, and for that reason you should only use % or em based values for text.

The only 'official' related guidelines can be found in WCAG 2.0, the w3 accessibility guidelines/techniques writeup:

• http://www.w3.org/TR/WCAG20-TECHS/G142.html

So browsers can scale, modern ones have no problem here, but weren't designed to be accurate, it's also an impossible task with mixed units (em, %, px).

3) Is Dan Cederholm's book really bullet proof...?

Before I start here, I haven't read the book... I never read a CSS book (plenty other resources) in my life, but my first and foremost skill is dreaming it.

Let's start with "What is bulletproof?". Bulletproof in web-design means it will work, everywhere, and will not break, anywhere. This alone should give you a clue.

It might have very well been bulletproof when he wrote that book, but the web is a dynamic place, and even if I take the latest announcement blogpost for the book it dates from December last year. Since then at least 3 new Chrome versions came out (rough estimation) and even more Firefox versions. Microsoft sat on his ass that this time (we would've been in big trouble if they decided to do rapid release schedules).

Things changed, new bugs have definitely been introduced since then.

Regardless of what is breaking it, nothing is ever bullet proof, just very, very close to what you want to always happen, with slight variations between browsers.

That doesn't mean it is a terrible book, looking at his CV he's definitely and a guru on web-design, so he's probably right about a lot of things in that field. I just hope he explains why things are done in a certain way, because that makes you a lot wiser than just learning to do things.

A: "You always use EMs for text! EMs are annoying! Why do you do that anyway?!"
B: "I dunno, read somewhere I should..."
A: "Lets just use pixels! Pixels always work."
B: "Hmmm ok."

You just lost IE7 support. (whether that's a bad thing, is another discussion)

Answer 2

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.