Tuesday, July 6, 2010

Weird rounding-off bug in WebKit

I ran into this weird problem while I was writing the css for my personal website. There is a navigation bar in the page with 7 links inside a <div> sitting side-by-side:

the page rendered like this in Firefox (and for certain viewport widths in chrome)

I specified the width of the first six links to be 14% and the that of the last one 16% in the css. All the paddings, margins and borders were set to zero. So, they seven links should take up the entire width of the containing <div>, right?

Well, in webkit based browsers (I checked in Google Chrome for linux and Safari in Mac OS X leopard), that sometimes just would not happen: the total width of the seven links would fall short of the total width of the containing <div> by just a few pixels and there would be an annoying narrow strip showing the background color of the <div>.

the pesky extra pixels in Chrome

More surprisingly, on resizing the browser window, sometimes the strip would go away and sometimes it would come back again. Firefox and opera didn't have any such problem rendering the page, though.

Now, I am no specialist in web designing. But still my common sense says that as long as 6*14+16 is 100, no such strip should be there. What the hell is going on?

Luckily, I found the answer while fiddling with the excellent Developer Tools of the Chrome browser. The widths computed by Chrome were:

ElementComputed widthIntended width
Container <div>1013-
First 6 <a>'s1411013*0.14=141.82
The last <a>1621013*0.16=162.08

Yes, webkit is taking the integer parts of the floats while computing the widths of the elements, instead of rounding off properly to the nearest integer. Therefore it's no wonder that for certain values of the width of the containing <div>, the sum of the widths of the child elements isn't adding up to the width of the parent.

I later found out that this bug has been reported in WebKit Bugzilla almost 5 years ago and hasn't been resolved yet. The bugzilla page doesn't even indicate that anybody ever tried to fix this crucial flaw capable of ruining the appearance of many webpages single-handedly.

Anyway, I wrote a few lines of javascript to make sure that the site renders correctly in chrome and safari and it's working just fine. It's really annoying though, being forced to use javascript to compensate for a rendering engine's shortcoming in this era of standards-compliant browsers. I shudder to imagine what I would encounter when I finally test the site in IE.


  1. experiencing embarrassed or shy. Nevertheless individuals who become aware of their blushing result in the scenario even worse since it then takes on the type a panic.

  2. What made it unusual for motorists looking cartier replica on, was Luddeke happened to be dressed rolex datejust replica in full Santa regalia. Despite losing the hat, white wig and beard, Luddeke fake belly shook like jelly as he he swiss replica watches pulled two motorists to safety. One driver life was likely saved, as his car exploded not long after reaching a safe distance.

    Why not take a few short minutes to watch http://www.artabloom.com/err.html Santa in action, and imagine what a child in a nearby car must thought seeing Luddeke in action through replica wathces the thick, black smoke!

  3. Where business students are engaged in preparing different assignments, agriculture students and professionals are always looked busy in researching upon different crops to increase production by minimizing its diseases. It has become very easy to ask write my research paper essay dragons for more detail online as well as hire professional writers.

  4. Several canicule ago, my acquaintance and I went arcade in a
    gucci replica handbags store. And
    we encountered a
    foreigner who was aggravating to explain what he capital to the shoppers. Under the advice of us,he
    assuredly bought what he wanted. And we abstruse that he was traveling to alpha his own business with
    these samples ofreplica chanel replica
    handbags.e approved to ask the shoppers to yield him to the replica handbags supplier so that he could
    order the hermes replica articles added directly. However, the
    branch is far abroad from this city. It is acutely absurd for him to get acquaintance with it for he is traveling to
    leave for Spain. Actually, there is a added acceptable way for him to acquaintance the handbags suppliers.
    That is to acquaintance them online. There are abounding louis
    vuitton replica
    handbags suppliers online and some of them aswell aftermath their articles by
    themselves. There is even OEM assembly of accoutrements available online, which provided humans with
    handbags with accessibility and satisfaction. They aftermath designer handbags for some acclaimed brands
    and broad replica handbags at low price. Because they can provide manufacturer's price, buyers can get
    actual reasonable discounts. And they abutment online arcade for both retail and wholesale. So if you wish to
    alpha a business of affairs breitling replica
    handbags, you can await on OEM assembly of accoutrements online. The superior of their replica handbags
    and after-service are both actual good.And you can just absorb beneath money and activity to get top

  5. acheter vente maillot nba pas cher with http://www.nailartmetisse.fr the secretary's daughter together, this time to see cheap, they are still together and still the same acheter vente maillot nba pas cher car came, which naturally understand the meaning of security. cheap to no attention to him, acheter vente maillot nba pas cher acheter vente maillot nba pas cher did not notice the security smile. Like many others, from that to the leadership pious smile, perhaps leadership simply do not see.

  6. The internet has made CISSP pass4sure higher education accessible for millions of people whose personal problems prevent them to attend conventional colleges or universities. Online academic centres offer education to all without the constraint of geography and time.

  7. This comment has been removed by the author.

  8. great post really appreciatable work. That will be valuable to everyone who uses it, including myself. Many thanks!
    Happy FRIENDSHIP Day Images
    Happy New Year 2017 Greetings

  9. Nice looking site.really appreciate for it and It is also useful for me.Thank you for sharing.
    Merry Christmas
    Happy Teachers Day

  10. Want to know about Cat Day, which is a special; day dedicated to your pet cat. Just check out my blog Cattales

  11. Wanting to claim a business is an exceptionally essential since you need to do some anticipating what sort of business you need. Owning a private company implies you need assurance and the push to make it develop. Research is required, persistence, determination, guts. check cashing corona

  12. Some may have taken out an automobile title advance in view of the esteem and value of their auto or truck. With banks presenting to $5000, there's a lot of squirm space to buy that level screen or Plasma.

  13. This will be certainly extraordinary give you that boost. Bless you for one's precious time specifically for authoring any such tremendous strategies on web log. At present go here and even follow-up bathroom renovation Bless you for one's precious time plenty specifically for captivating article.

  14. Beneficial write-up! That write-up can be extremely effective I believe and gives people quite a few thought processes. It is advisable to store people swap to be aware of including write-up having foreseeable future. Here press in this article reliable washers 2019 Persons conducted a wonderful undertaking together with get pleasure from loads suitable for presenting your site. Love for this presenting


  15. تنظيف بالاحساء افضل شركة تنظيف بالاحساء
    تنظيف شقق بالدمام تنظيف شقق بالدمام
    تنظيف شقق بالمدينة المنورة تنظيف شقق بالمدينة المنورة
    تنظيف شقق بالرياض تنظيف شقق بالرياض

  16. I thank you for the information and articles you provided

  17. Pakistan no.1 Article in my Installcrack.com site Now just 1 click to download!
    DriverPack Solution Crack

  18. This comment has been removed by the author.