Overflow: auto + ajax + Safari + hack = joy
The problem:
Using the ajaxLoader which I wrote to do easier content replacement with Drupal and jQuery, I was running into a very strange issue with Safari. FF and IE would load fresh content into a div that I had defined with the overflow: auto property and display scroll bars to see all of the content, but in Safari, the content was just cut off. The css for this seems as though it should be straight forward:
/* AJAX content replacement */
#fflAjaxContent{
margin: 5px 0px 10px 0px;
height: 320px;
width: 380px;
overflow: auto;
float: left;
}
When Safari would load the content, it would not add scroll bars. Even setting overflow: scroll didn’t actually allow Safari to scroll on the div, despite the presence of the scroll bars.
On the Quirksmode overflow page, there is a small note that states:
Safari cannot dynamically change overflow to auto or scroll.
Since the content inside the div I’m using is being re-written by jQuery calls, my guess is that Safari ought to be dynamically adjusting that div, but unfortunately, it can’t.
The solution then was this rather ugly beast:
<div id="fflAjaxContent"><img src="" width="1" height="800" /></div>
As long as the image height is greater or equal to the height of the content that you’re inserting, it seems to work. While it does give some funny spacing sometimes, FF and IE don’t seem to mind. The image forces the div to be drawn to a size where the scroll bars that are present will scroll along the image- the replaced content included. At least, I think that this is how the fix works.
Special thanks to Stephanie for banging her head against this one with me.
