Topic awaiting preservation: Fluttering firefox

Hi, when I use the xmlhttp-object to refresh a div in firefox on a regular interval, it begins to flutter after a while.
Anyone know why this is, and how to avoid that?

(^-^)b

By 'flutter' you mean...?


Justice 4 Pat Richard

Well, the text is visible and then it's not, and then it is...
If I update a div using innerHTML in IE, then it does'nt 'flutter'..so why does Firefox?

(^-^)b

Well, the text is visible and then it's not, and then it is...
If I update a div using innerHTML in IE, it does'nt 'flutter'..so why does Firefox?

(^-^)b

Well, the text is visible and then it's not, and then it is...
If I update a div using innerHTML in IE, it does'nt 'flutter'..so why does Firefox?
.. and what can I do about it?

(^-^)b

Unless you provide a test URL, we'll have a hard time to find a solution in our crystal ball.

Sorry, double post....

(^-^)b

p01: He's talking about render flicker in Firefox.

amikael: It's a side-effect of the rendering engine used in Firefox. When it updates something graphically, it first clears it and then rerenders it directly onto the screen, which is why you see it go blank and then draw, creating the fast flutter. A way around it is to load the data into a second (hidden) div, and then unhide it on top of the first one. Then, update the first one, and unhide the second. In this way, there will theoretically be no rendering flicker, though I havn't yet tried the technique myself.

---
Website

Iron Wallaby: By reading amikael's post I thought he was refreshing the content of the object at slow interval. I mean, xmlHttpRequest is not quite suitable for high speed communication between the client and server. But of course, your post makes sense.

Btw, you should try to do a double buffering for you Asteroids entry

Yeah, I'll be getting around to it once all the other stuff I need to get done is out of the way.

---
Website

Thanks for your help guys, I'll try it.

(^-^)b

If you're clearing the .innerHTML of the div before sending the request, the delay for the xmlhttp response etc. may be what you're seeing there.

eg.

someDiv.innerHTML = '';
xmlhttp.load(someURL);
xmlhttp.oncomplete = writeNewStuff;

However, If you modify .innerHTML after the request has finished, you shouldn't see any big delays. If any flicker etc. is noticed at this point, it's likely just browser render speed (and swapping elements' visibility as suggested may be a nice workaround in that case.)

What I do on my site is prepend a "Loading..." bit of text to the current bit of content being viewed, so the user can see something's going on in the event the request takes a while to go or fails for some reason. Once the request is complete, the response is written back to the document.

(Edited by Scott on 05-26-2005 18:40)