Question

I am having an interesting bug in MSIE8, only.

I have also tested this in MSIE7, MSIE9 and Chrome and could not reproduce it in those environments.

I have a flex application which is embedded in a webpage. The application has a few top level components. One is a mx:ViewStack which contains a number of different icons. The other is a mx:Canvas which contains a number of child mx:Canvas elements (which are used as layers to hold other UIComponents).

<mx:Canvas backgroundColor="#FFFFFF" id="drawing_area" borderColor="#000000" borderStyle="solid" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="728" x="10" height="522.8889" y="10">
  ...
</mx:Canvas>

The error occurs when I perform the following steps.

1. Load the page with the component
2. Let the component fully load
3. Scroll down so that the top of the flex content goes outside the bounds of IE8’s content window.

When I do the above, the mx:Canvas with the border disappears. It can still be interacted with, but any content moved into one of the child elements also disappears.

In this first image you can observe my starting state, there is a border around the drawing area, and the drawing area can be interacted with.

This second image shows the issue, after additional scrolling down. The border disappears and all UIComponents placed into the drawing_area also disappear.

Unfortunately IE8 is still a popular browser in the organization this was designed for.

Anyone have any clues as to what might be happening. I have tried different wmodes for flash. I am currently using window, but have tried transparent as well, and have the same issue.

Answer 1

I have tried a number of different things to get a work-around for this bug without much success.

I am using Rails on the backend and this issue is tied to only the “new” action, and does not appear on the “edit” action. Both pages use a shared partial to render the content.

Because of this I am doing browser detection using the rails gem browser. When a user is using IE8 I provide a recommendation to upgrade. On the page that has this error occurs I am providing instructions to enter data for the required fields and then save their report. This will take the user to the “edit” action and they will be able to interact with the flash content without issue.