Rendering bug:animation applets overlap with other divs when page scrolling
I saw people discussing the similar issue on this blog several month ago.
In my testing, animation applets always overlap with other html elements when scrolling in browser. IMHO, it's a major bug in both applet and javafx applet as it makes animation can only work smoothly in an unscrollable page (most web pages are scrollable today).
Not only display of other html elements are damaged, the display of top-line and horizontal scroll bar in IE 7 can also be damaged by a scrolling animation applet. This issue can be alleviated by slowing down the scrolling speed in some cases.
Conditions for reproducing
1. Some combinations of Browser/OS
This issue happens in IE7/XP, iE7/Vista, Firefox 3.5/Vista.
From my testing, This issue does not appear in Chrome and Firefox 3.5/XP.
2. An animation applet that updates the screen frequently.
E.g. the javafx mediabox player: http://javafx.com/samples/MediaBox/index.html
3. Scrolling the page up and down rapidly
After scrolling my applet in browser up and down several times, I find that the neighboring divs will be covered by the applet. After the end of scrolling, the neighboring divs do not refresh and recover to its orginal content automatically.
Screenshots of rendering error:
javafx overlapping in Firefox 3.5/Vista:
scrollbar error in IE7/XP:
see attach1, attach2
1. applet overlapping in Firefox 3.5/Vista: http://xfiledialog.googlecode.com/files/overlap_in_firefox3.5_Vista.jpg
2. applet overlapping in IE7/Vista: http://xfiledialog.googlecode.com/files/overlap_in_IE7_vista.jpg
3. applet overlapping in IE7/XP: http://xfiledialog.googlecode.com/files/overlap_in_IE7_XP.JPG
I guess that it's caused by the syncrhonization issue between the applet plugin and the browser. As the neighboring divs do not know that their content has just been covered by the applet during scrolling, they do not redraw automatically.
Two extra text divs are added into the page: one just before the applet and one just after the applet. The two extra div's height is 100px. The two divs will be forced to redraw each time when the page is scrolling.
Use Google chrome browser. Only chrome can avoid this issue completely.
Hope this bug report could be accepted finally.
Message was edited by: stevpan