widthunreliable on Android?
Having tested mobile phones for the last seven months or so, I have become pretty well inured to odd, or even disastrous, results. Still, after encountering the following bug on the Android, even I started to doubt my sanity.
I don’t usually spend a blog post on a single browser bug, but this time I break that rule because this is doubtlessly the weirdest bug I found so far, and possibly also the most serious one.
width may be unreliable on the Android — in certain situations.
The story centres on my box-sizing CSS test, which I obviously run in every phone I can get my hands on. In order to test the
box-sizing property I have added a few reference boxes to the page. These reference boxes have hard-coded widths of 300, 330, and 310 pixels, respectively. Since this is a
box-sizing test I was very careful not to give the reference boxes any padding or border.
The test is supposed to look like this (Android G2 in landscape mode):
The purple reference box is 300 pixels wide, the blue one 330 pixels, and the green one 310 pixels.
This allows me to determine that the Android supports
-webkit-box-sizing. (In this particular case I feel that the
-webkit- prefix is nonsense, because the definition of
box-sizing isn’t going to change ever again, but let’s leave that discussion for another time.)
The weirdness starts as soon as you orient the G2 to portrait mode:
Obviously, the boxes still have the same hard-coded width. Still, all of a sudden the purple reference box with
width: 300px is wider than the blue box with
What! The! F!?
(Apologies for the “F” but my profanity allotment for this month has already been used up.)
I can understand a width being slightly off; I don’t test whether the boxes actually take exactly 300 and 330 pixels. If it’s a few more or less, I don’t really care.
But I do expect a 300px-wide box to be less wide than a 330px one.
I mean, that’s not totally unreasonable, is it?
The Android G1 is slightly less odd: here the boxes are exactly equal in size. Still, this is not an ideal situation.
Android WebKit team, I advise you to take a look at your width calculation algorithm again. Something is hideously wrong.
Upcoming speaking gigs:
Comments are closed.