SiteCrafting, Inc.

While writing a PHP script this weekend I ran into an interesting problem. The script watches for an empty text file to be filed with text. It does this with a sleeping loop and compares the file size every second or so. This works really well for one browser tab. But when I had two tabs, in parallel, the second one wouldn't display anything until the previous one had completed. So I wrote up the following test case.

$i = 10;
while(--$i) {
    echo "
$i
";
    flush();
    sleep(1);
}
echo "
Done
";

This will count down from 10 to 0, then echo "Done". The flush() command will send the current HTML to the browser, giving it a chance to render the content it's been sent so far.

When running this on a single tab it worked as expected. With two tabs open, the second one would remain blank until the first tab had completed the count down. Then the second tab would display the count down all at once. So what's happening?

After a little research, and some talk around the office, it turns out the browser does some odd things when loading the same page on two tabs. IE, Chrome, and Safari all have the same behavior. Each tab/window is independent and load separately. Firefox does this also, except the second tab waits for the first one to load before loading itself (sometimes pulling from cache, sometimes downloading anew). Opera does something completely strange. It keeps the two windows synced, such that giving a gap of a few seconds between tab refreshes still show the same point in the count down.

Each browser has it's own way of handling multiple tabs with the same address, and there is no clear standard on what the behavior should be. From a developer stand point, I think IE and Webkit (Safari and Chrome) have it correct. Keeping the two tabs separate makes the most sense and this behavior makes the developer have to worry less about parallelism (race cases, timing, rendering issues, etc.).

Browser Versions tested:
Firefox 3.6.11
Opera 10.63
Chrome 7.0.517.41
Safari 5.0.2
Internet Explorer 6, 7, 8

So how do you think the browsers should behave in these cases?