Wednesday, June 8, 2011

Google Chrome Layout Bug

It seems that the em calculations in Google chrome are slightly off track. Following is a small piece of HTML using DOJO toolkit’s default CSS. Its font size and line height calculations are based on http://24ways.org/2006/compose-to-a-vertical-rhythm

  1: <!DOCTYPE html>
  2: <html>
  3:   <head>
  4:   <style>
  5:   @import url("http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css");
  6:   </style>
  7:   </head>
  8:   <body>
  9: <blockquote>
 10: Testing dojo blockquote.
 11: </blockquote>
 12:   </body>
 13: </html>


 



The relevant CSS is presented below:



  1: body { 
  2:   font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; 
  3:   *font-size: 75%;
  4: }
  5: 
  6: 
  7: blockquote { 
  8:   font-size: 0.916em; 
  9:   margin-top: 3.272em; 
 10:   margin-bottom: 3.272em; 
 11:   line-height: 1.636em; 
 12:   padding: 1.636em; 
 13:   border-top: 1px solid #ccc; 
 14:   border-bottom: 1px solid #ccc;
 15: }
 16: 
 17: 


 



Now if we look at this block-quote’s layout in Firefox (4), it looks like as follows:



image



While the layout in Google Chrome (11.0) looks like:



image



You can notice that Firefox reports the padding to be 18 pixels, while Chrome reports it to be 17 pixels. Similarly, Firefox says the margin to be 36 pixels while Chrome considers it to be 35 pixels.



I think at least one of them is wrong.



Looking at the stylesheet, the computation goes like this:



font-size  = 12 * 0.916 = 10.992 pixels



padding = line-height = font-size * 1.636 = 17.983 pixels



margin-top  = margin-bottom = font-size * 3.272 = 35.965 pixels



Looking at computed styles, we can notice that for both Firefox and Chrome, the font-size is coming out to be 11pixels. It looks like Chrome is truncating margins and padding while it is rounding the font size.

No comments: