Trouble updating position:fixed elements

16 views
Skip to first unread message

Walter Lee Davis

unread,
Jun 22, 2011, 4:11:02 PM6/22/11
to prototype-s...@googlegroups.com
Has anyone else seen this? I have a large and complex page, which
contains one position:fixed element (a counter). I use an observer to
update that element, and in Safari 5.latest, the updates only appear
after I subsequently scroll the page a little bit.

Something like this:

(bunch of checkboxes here)
<div id="message" style="position:fixed; top: 100px, left:100px;
padding:3px; border:1px solid red;"></div>
<script type="text/javascript">
var all = $$('input[type="checkbox"]');
document.observe('click',function(){
var current = all.select(function(elm){return elm.checked;});
$('message').update(current.toString() + ' out of ' + all.toString()
+ ' selected');
});
</script>

On Firefox, this just works. The message updates each time the form is
clicked, and the number stays in synch with the total number of
checkboxes checked. In Safari, clicking doesn't change the message
until you scroll the page a little bit. Then it seems to gather its
thoughts and update the message area. I tried all sorts of stuff
(adding and removing a text node a la Scriptaculous, for example) to
try to get it to update, and only had intermittent success. What
finally fixed it was to get rid of the position:fixed and replace it
with position:absolute plus a scroll observer to reposition the
message div. Hacky, for sure.

Walter

Victor

unread,
Aug 5, 2011, 12:55:52 PM8/5/11
to prototype-s...@googlegroups.com
Maybe

window.scrollBy(0, 0);


can help?
Reply all
Reply to author
Forward
0 new messages