A little bit of this, a little bit of that, but probably mainly javascript

I received a bug report not long ago about an issue in Chrome and Safari. Some text was covering part of an image although padding should have taken care of that. With both safari ( 4.0.5 ) and chrome ( 4.1.249.1045 ) fired up, I started playing with the css using their dev tools. Thinking that it will be some trivial issue, I changed some positions and margins, only to find out, that no matter what property I changed, the page would rerender, fixing my issue. Alright, so there goes the easy way out! Gotta try something else!

Since this page is cms generated, I resorted to saving the page from firefox to my harddrive. After I pointed all resources to the live site, the issue still existsed, so it was time to start hacking away all the pieces that were not needed to reproduce the error. I have to add here that I only had partial knowledge over the solutions used on the page…

It soon turned out, the padding was added with javascript after the image was done loading and it’s width could be determined. There doesn’t seem to be anything wrong with that, right? Right! But there seems to be something wrong with changing the padding of an element with javascript.

In the end my page was little more that this:

<div id="scripted_padding">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a purus eget velit pulvinar faucibus porta ac arcu. Cras vehicula urna odio, eu placerat sapien. Aenean commodo ipsum vitae lorem accumsan non posuere dui iaculis. Sed facilisis velit sit amet libero tristique eu porttitor ante blandit. Sed condimentum urna eget lacus molestie luctus. Curabitur ac iaculis urna. Etiam leo felis, sodales molestie sagittis eu, tincidunt ac nisl. Suspendisse et euismod dolor. Fusce mollis risus quis purus fringilla vel posuere dui aliquet. Sed et felis id est mollis ultrices in quis nunc. Nullam vel sapien sed nulla posuere condimentum.
    </p>
</div>

I had 1 line of javascript adding padding-right to #scripted_padding and sure enough the text inside the p tag would still fill the whole width of the #scripted_padding element. I could see in both browser’s inspector, that the element did have padding, but the p tag seemed to ignore it.

I’ve thrown together a simple page where you can test this yourself.

As a workaround I’ve added a .hide().show(1) after setting the padding in webkit, but I realize that this is, well, ugly and terrible, so I would love to hear a better solution to this problems!

Update [27/5/2010]: Just checked on my iPhone ( 3.1.3 ) and the issue exists there too!