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.

Posted by Debsankha at 6:04 PM
Labels: , ,

33 comments:

  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.

    ReplyDelete

  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!

    ReplyDelete

  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.

    ReplyDelete

  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
    income.

    ReplyDelete

  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.

    ReplyDelete

  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.

    ReplyDelete

  7. Some Replica handbags are made by high quality manufacturers and some are only made by low quality factories.A site that offers you everything available is not selective about the quality of item that they ship. Incidentally in China the best replicas are always of Louis Vuitton replica handbags and replica Chanel handbags so a site that has a large Louis Vuitton and Hermes handbag collection and little selection of other designers is likely to be the most concerned about quality.I started to get into Rolex Air Kin since they hold value really well, but I’m also very fascinated with the Omega watches mechanical aspect of them. Hundreds of parts working together making a fine tuned machine that can be spot on day after day.

    ReplyDelete

  8. I like this a lot. Thank you for sharing. I'm always looking for upcycles like this. In the end, you don't know it was a shipping pallet to begin with!
    ipl 2016 live matches watch online here
    watch cricket stream on cricbuzz ipl matches
    ipl live streaming 2016 score watch online

    ReplyDelete

  17. This comment has been removed by the author.

    ReplyDelete

  18. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.
    - five nights at freddy's
    - five nights at candy's

    ReplyDelete

  19. 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
    http://www.inspirationallovequotesimages.com/

    ReplyDelete

  20. Nice looking site.really appreciate for it and It is also useful for me.Thank you for sharing.
    Merry Christmas
    pokemon-goapk.com
    Happy Teachers Day

    ReplyDelete

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

    ReplyDelete

  24. New Year 2017 is just round the corner, and it is one of the most celebrated days of the year. You can checkout my blog Happy New Year 2017 for all other latest updates.

    ReplyDelete

  26. 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

    ReplyDelete

  28. Your topic is very great and useful for us…thank you

    http://word-cookies-answers.com

    ReplyDelete

  31. 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.

    ReplyDelete

Subscribe to: Post Comments (Atom)