Safari Frame Rows Bug .. Adam Alton | Web Designer

the bug

This is a bug which appears in Safari version 3.0.x for the Mac. It may well occur in other versions, including the PC version as well, so if you are able to test it then please let me know (on my homepage) so that it can be doucmented here.

News! As of version 3.1.2 they appear to have fixed it, but I will leave this page here, so that if anyone comes across this problem they will not feel alone.

The bug occurs when you have a frameset with two rows in it, where the bottom row is set to a very small value, e.g. where rows="*,0", rows="100%,0%" or anything similar. Safari doesn't render the rows properly and it creates the top row only as tall as it needs to be to fit its content in it, it wont leave any space below the content (even though your rows="" attribute tells it to), and it then leaves a big white gap in between the two rows, and then renders the bottom row correctly at the bottom of the widnow.

The white space that Safari creates is not part of the top row, it's not part of the bottom row, and it's not part of the body. You can try applying styles to either of the frameset rows, to the <body> tag or to anything else that you can think of. None of them will effect the big white piece of nothingness.

The bug will not occur if the content in the top frame takes up more space than will fit on your screen, i.e. if the page has a scroll bar.

The big white space will disappear if you resize the window (by dragging the bottom right corner).

example

Here is an example. This example will only work if you view it in Safari. To see what it should look like, view it in Firefox, or (dare I say it) Internet Explorer. Yup, that's right, IE renders it correctly and Safari doesn't.

For those of you without Safari, or with a version which doesn't contain the bug, here's a simulation of roughly what it looks like. If you do have a version of Safari that doesn't contain the bug, or if you've got a version other than 3.0.x that does contain the bug then please let me know so that I can list them here.

the fix

So how do I fix this heap of shit? Well, I've told Apple about it, but it seems that they're too busy making iPhones to do anything about it. (Ok, that's rude, they've now fixed it.) But if you want to be sure that all Safari users see your page correctly, here's my bodge to make your page work.

The most sensible fix that I have found is to create a <div> in the page, which is resized by javascript to momentarily be just taller than the height of the window, therefore activating the scroll bar and causing the mysterious white gap to disappear. This <div> is then resized down to zero size, and the bug remains at bay (until the page is reloaded).

Code for your frameset:


<head>
<script type="text/javascript">
function sort_safari(){
	if(navigator.appVersion.match(/Safari/)){
		var height = window.innerHeight;//get the height of the view port
		window.frames.mainframe.document.getElementById('safari_fixer').style.height=height+"px";
		var t = setTimeout("window.frames.top.document.getElementById('safari_fixer').style.height='0px';",20);
	}
}
</script>
</head>
<frameset rows="*,0" onload="sort_safari">
	<frame src="whatever.php" name="top"  noresize="noresize" style="border:none;" />
	<frame src="jukebox.php" name="bottom"  noresize="noresize" style="border:none;" />
	<noframes><body>Get Firefox bitch</body></noframes>
</frameset>

And then in your top frame stick this somewhere:


<div id="safari_fixer" style="height:0px; width:0px;"><div>