Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Flash object fails when scrolling

Load, OK. Scroll down, back up, broken.

11:58 pm on Dec 13, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

Weirdest thing I've ever seen, but thought I'd see if anyone has encountered this.

Problem: A flash navigation header works fine on page load. Scroll down so that the header is out of the viewport, or, switch to another browser tab, then back to the problem page tab, the navigation fails all mouseover events. Click anywhere on the page to return focus (I am guessing) and it works again.

Development: CS3 Flash V.9.0
Publish settings: Player 9, AS 2.0

Background: simple header navigation with animated buttons, had some problems due to filters, all simplified to a self-contained object, works fine. No external libraries or dependencies.

Implemented using: SwfObject with an image and corresponding imagemap for the alternate content so the nav still works.

Working condition: HTML 4.01 doctype, validated; I add enough <p>&nbsp;</p> elements to the bottom of the page to cause a scroll, no problem whatsoever in this condition.

Broken condition: Unsure, but the page contains the following conditions and subsequent problems:

- XHTML strict doctype

- Fails validation due to common simple problems: unquoted attributes, target=, another flash object using <object><embed></object>, and others. The overall HTML is not broken but fails validation due to what seems to be unrelated issues - leading me to believe validation might be an issue as it puts it in Quirks mode.

- Various calls to Javascript libraries - besides swfobject.js, there are requests to scriptalicious, lightbox, prototype, and a small rollover script. However, removing/commenting these did not fix it.

- The site uses tables for layout.

- Cache religiously cleared between tests, caching cannot be an issue.

Note that leaving all elements in place "as is," I simply pulled the Flash "container div" out of the table,

<div id="flash-container"><img src="alternate.jpg"></div>

instead of

<div id="flash-container"><img src="alternate.jpg></div>

It works fine, which is why I hypothesize it as some weird combination of doctype, invalid (X)HTML, and the ID'ed object nested within a table. My reasoning is that if it's thrown into Quirks mode, it's messing up the DOM. But why the heck it works on load and breaks only when scrolling down and back up . . . is beyond me.

I have not validated the document as XHTML as it's not my project and there's no budget to spend hours fixing it for validation - this is my first recommendation to the client, hope they can get through that. The validation errors, again, are not critical ones, things like unquoted attributes, missing alts, and so on, the (X)HTML is well formed.

I need sleep tonight, someone tell me they've encountered this. :-)