Fixed bug with marks in percentage by size of WebKit: are there any workarounds?

Question

I am experiencing what seems like an error in rendering the width of the floating elements in WebKit when they have fields.

In Firefox (3.6) and WebKit (Chromium 5.0), the following values ​​are displayed:

<div style="width: 100%; background-color: green;"> <div style="background-color: red; float: left; width: 50%;">n</div> <div style="background-color: red; float: left; width: 50%;">n</div> <div style="clear: both;"></div> </div> 

That is, like a completely red box, without a green background.

Now try the following:

 <div style="width: 100%; background-color: green;"> <div style="background-color: red; float: left; width: 40%; margin-left: 10%;">n</div> <div style="background-color: red; float: left; width: 50%;">n</div> <div style="clear: both;"></div> </div> 

It is expected the same as before, except that 10% of the window on the left is green. This is what is seen on Firefox.

However, in WebKit browsers, one green pixel remains in the right part of the window: floating elements no longer fill it completely.

The problem seems complicated when more floats and fields are used, as a result of which a larger number is not recorded.

This is mistake? Rounding error? This, of course, is not what I expected. And more importantly, what can I do to get around this?

---

EDIT: after a long search, I found this error message; probably rounding error as expected: https://bugs.webkit.org/show_bug.cgi?id=5531

My most important question still stands: is there any way around the error?

Answer 1

I suspect there is no magic for this. Browsers interpret sizes mathematically differently. There is another question related to this here , and this is a particular problem that I encountered. Here is more detailed information here . Once I read a wonderful article explaining the problem very accurately, but I lost my bookmark. I will try to find it again to post it here.

In fact, different browsers round decimal pixel values ​​differently. So, the short answer is: you will never get an accurate cross-browser solution as long as these differences exist. The specific problem I ran into is what was described in my first link: even without using percentages (fixed pixel sizes), I ran into two “sides” between browsers in which the vertical alignment of some elements would be different: Firefox and Internet Explorer, on the one hand, and Opera, Chrome, and Safari, on the other.

However, it depended on the exact line height and font size values ​​I used, so sometimes I get differences even between Firefox and IE or another combination. Without using conditional CSS, I could only reduce the problem to these two groups, and then use conditional CSS to customize the fields in Opera and Chrome.

So, to summarize, as far as I know, I'm afraid you will have to use conditional CSS. Hurrah!

Answer 2

Perhaps something like this?

 <div style="width: 100%;"> <div style="background-color: green; float: left; width: 10%;"></div> <div style="background-color: red; float: left; width: 40%;">n</div> <div style="background-color: red; float: left; width: 50%;">n</div> <div style="clear: both;"></div> </div>