Wednesday, January 30, 2008

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.

Labels: , , ,

0 Comments:

Post a Comment

<< Home