Cross browser website testing

This morning I was doing some more work on my photo website, testing it in various browsers.

Konqueror had a problem rendering an image that overflowed its container when the viewport was small - scrolling to the right to view the rest of the image, would just reveal the page background rather than the image - so it looked like the image was cut off at the edge of its container, rather than overflowing it. But sometimes the full image would appear, and sometimes bits of the image would appear in the scrolled area (as you scroll or resize the window). So it seems that was just Konqueror being buggy.

IE wasn't applying a negative text indent to the first line of some text (so it looks like the other lines are indented). Luckily, I'd already solved this previously, just forgotten to implement it.

Next I found that K-Meleon 1.5.3 (the latest version) wasn't display inline-block list items correctly. After some googling I found that it doesn't support inline-block, but there is a fix in the -moz-inline-block and -moz-inline-box CSS properties: display: inline-block and old Gecko. In my case I had a list containing an anchor in each list item. I found I had to apply -moz-inline-box to the list items, and -moz-inline-block to the anchors inside the list items for the list to display as an inline-block list.

I had a similar problem with a div containing inline-block anchors, which each contained a span and an image. In this case I just had to set -moz-inline-block on the anchors, and it now displayed the same as in other browsers.

I also found a tutorial which covers how to do a similar thing, even with inline-block items where the size varies: Cross-Browser Inline-Block

In Chrome and Safari (possibly other Webkit based browsers also) there was a sporadic problem with a div not being resized by javascript. As the problem was sporadic, I didn't really have a way of debugging it (I tried a few page refreshes with the javascript deugger open in Safari and a breakpoint set at the relevant point in the code, but the script worked correctly and resized the div whenever I was doing this).

After lunch I was trying to debug a problem with Google Chrome not resizing a Raphael svg object when the window was resized. The script was meant to remove the current Raphael object, and then add a new one whenever the page was resized, but what it seemed Chrome was doing was just adding another Raphael object, resulting in a very long div full of Raphael SVGs.

Debugging though, I found a different problem when using Chrome's debugger. It seemed that when I added a node to the page, the node would not be added, and it would also remove the node that it was meant to be inserted before.

I thought maybe it was an 'id' problem (can't have two nodes with the same id), as the node I was inserting was a clone of a child of the node I was inserting it before, but changing the id didn't make any difference.

This is what happened when I stepped through the javascript, using the console to check whether the node exists, and to change the copied node's id:

//JS
var cp = this.aboutTextOriginal.cloneNode(true);

//Console
document.getElementById('contentContainer').childNodes
NodeList
0: Text
1: HTMLImageElement
2: Text
3: HTMLDivElement
4: Text
constructorFunction: "undefined"
length: "undefined"
protoObject: Object
prototypeObject: "undefined"

//Console
cp.setAttribute('id', 'blahde')
undefined

//Console
cp.id
blahde

//JS
cp.insertBefore(p);

//Console
document.getElementById('contentContainer').childNodes
NodeList
0: Text
1: HTMLImageElement
2: Text
3: Text
constructorFunction: "undefined"
length: "undefined"
protoObject: Object
prototypeObject: "undefined"

Very strange!

To fix it, I removed 'p' before I inserted 'cp'. But now the script was just working as it was originally (i.e. filling the div up with Raphael SVGs when the page was resized). How it stopped working I don't know.

Google Chrome seems to be quite weird and unpredictable, especially its debugger. One time when I entered statements into the console, it would just echo out what I'd typed rather than actual value of what I'd typed e.g. if I wrote $(window).width() it would just say $(window).width(), rather than 764 or whatever the window width was.

That only happened once. Something that happened all the time though was that the script kept breaking where there wasn't any break points and even though there wasn't any errors causing the script the break there either.

I didn't have much luck trying to debug how the div was getting filled up with Rapahel SVGs in Google Chrome. First of all when stepping through the code in the Chrome javascript debugger, everything looked okay, but then it went to binding an event handler to the window.resize event, which is part of the init function that is only run by jQuery when the DOM is ready.

Adding an alert in before the window.resize function was set, made it so that Chrome no longer bound the window.resize event handler multiple times, even though it shouldn't have made any difference.

I also had a problem stepping through the code, in that the Chrome debugger was issuing an error saying that an object was null. Adding a break in before the line causing the error so I could check the object's value stopped the error, again it should not make any difference where you have breaks in the debugger as to how to code is evaluated.

And finally, running through the code step by step in Chrome's javascript debugger, multiple Raphael SVG objects were not created. But try it without the debugger on, and they are. So I couldn't debug what the problem was. ANNOYING!

I spent all afternoon trying to find out what was causing this problem in Chrome. I just checked if there are any Google Chrome updates available, and there aren't.

In the evening I played on New Super Mario Bros Wii with Moccle and L for a bit, and also did some more testing/fixing minor problems on my photo website.

The weather today was overcast all day and rained a bit in the afternoon.

Food
Breakfast: Grapefruit marmalade toast sandwich; mug of honey & lemon drink.
Lunch: Grated mature cheddar cheese and ground black pepper sandwich; a few cherry plum tomatoes; pear; home-made mince pie; Fox's Classic; cup o' tea.
Dinner: Beef burger in bun with grated mature cheddar cheese and Tomato ketchup; Bowl of cream of vegetable fake cup a soup. Pudding was home-made Lemon Meringue pie with cream. Coffee.