What would cause a <p> element to not span full width in the Android browser

Question

I have been asked to take a look at a strange issue and cant figure it out. Basically

elements would typically span full width as they are block elements, but on certain pages they don't seem to want to. I have tested this on the default ICS Android and Dolphin and it is playing up on both. This question sums up the issue, only the answer does not work: Why won't the Android browser span this paragraph over the full browser width?

UPDATE: A strange solution? If I set the following CSS p{ background:#fff; } it resolves the problem, what could cause some a strange issue. The issue is, I need the background to be transparent.

Answer 1

It's a hack, but my solution was setting background: url(''); on my paragraph and heading tags. I need my background to be transparent so I can't set a colour.

Oddly setting background: rgba(0,0,0,0); doesn't work either for some reason?

If you want to be safe and actually supply a valid image url you can use:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=);

This is a base64 100% transparent single pixel background.

I will note that this situation only started occurring for me when I set my viewport to 640 so that the mobile site would scale fine for any mobile browser.

This seems to be a bug with viewport scaling not functioning correctly from what I can tell.

Answer 2

This one is a trip alright.
I set my Android to not auto fit pages, fixed the problem.
I then set my phone to auto fit pages, added to my <p> in my css background: black; and it is fixed.
Another odd thing is that in my stylesheet, if I set p{ text-align: center}, the <p> spans all the way across like I expect, with my phone set to auto fit pages and no background setting. I also did text-align: right, works as expected. I then changed text-align: left, now it is broken again. Very, very odd issue here....