Jumpy scrolling in Flex 3 application

We've been beating our heads against the wall at work trying to fix an extremely irritating bug in a flex project we're working on.

The scenario was that we had a canvas with a background image, that would scroll when it exceeded the length of its container (a VBox in our scenario).

If we add the background image inline using the backgroundimage property, with a background size of 100%, then started scrolling over our content, suddenly the scroll behavior would become erratic and jumpy.

It was strange, because when we grab the drag handle, and stay over the "track" of the scroll area, it worked fine. Also, if we moved our cursor outside the container and kept dragging it worked fine. Finally, if we were dragging and went over a container INSIDE the jumpy canvas it would scroll normally.

What fixed the issue was taking the backgroundimage property off the canvas, giving the canvas a stylename, then in the mxml document added a style block and defined the backgroundImage property with a value of Embed("imageName.png").

This immediately stopped the jumpy-ness and it works great.

Another day lost due to Internet Explorer 7. Thanks IE.

I've had to find this solution twice, and both times it has cost me dearly - so I am posting here for as much my benefit as anyone else's.

Scenario: Calling a JavaScript function from within Flash using ExernalInterface when Flash is in a form.
Problem: IE7 throws an error when we call ExternalInterface. The error says "player is not defined" - "player" is the id I use for my flash object.
Reason: Apparently, IE can't find an object by ID within the DOM if that object is within a form.
Solution: At the end of the javascript that I use to write out the flash tags, I put this line of code:
player = document.getElementById('player');

Here is a better explanation and the solution (see the comment by IsaacTheIceMan from 19 Oct 2007)