2 Replies Latest reply on Feb 8, 2011 7:54 AM by flairjax

    Custom flex application skin with scroller causes IE Crash!!

    flairjax Level 1

      Has anyone seen this before?

       

      I am using the skin from flexexamples.com for all my s:applications (see below).  In IE when you use the mousewheel the IE will hang then crash. Firefox doesn't crash.

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-contain er-in-flex-4/ -->
      <s:Skin name="CustomScrollingApplicationSkin"
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
              alpha.disabledStates="0.5">
          <!-- states -->
          <s:states>
              <s:State name="normal" stateGroups="normalStates" />
              <s:State name="disabled" stateGroups="disabledStates" />
              <s:State name="normalWithControlBar" stateGroups="normalStates" />
              <s:State name="disabledWithControlBar" stateGroups="disabledStates" />
          </s:states>
         
          <fx:Metadata>
              [HostComponent("spark.components.Application")]
          </fx:Metadata>
         
          <fx:Script fb:purpose="styling">
              <![CDATA[
                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                      bgRectFill.color = getStyle('backgroundColor');
                      bgRectFill.alpha = getStyle('backgroundAlpha');
                      super.updateDisplayList(unscaledWidth, unscaledHeight);
                  }
                 
                  private function onMouseWheel(event:Event) : void {
                      event.preventDefault();
                      event.stopImmediatePropagation();
                  }
                                               
              ]]>
          </fx:Script>
         
          <!-- fill -->
          <!---
          A rectangle with a solid color fill that forms the background of the application.
          The color of the fill is set to the Application's backgroundColor property.
          -->
          <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
              <s:fill>
                  <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
              </s:fill>
          </s:Rect>
         
          <s:Group left="0" right="0" top="0" bottom="0">
              <s:layout>
                  <s:VerticalLayout gap="0" horizontalAlign="justify" />
              </s:layout>
             
              <!--- Application Control Bar -->
              <s:Group id="topGroup" minWidth="0" minHeight="0"
                       includeIn="normalWithControlBar, disabledWithControlBar" >
                 
                  <!-- layer 0: control bar highlight -->
                  <s:Rect left="0" right="0" top="0" bottom="1" >
                      <s:stroke>
                          <s:LinearGradientStroke rotation="90" weight="1">
                              <s:GradientEntry color="0xFFFFFF" />
                              <s:GradientEntry color="0xD8D8D8" />
                          </s:LinearGradientStroke>
                      </s:stroke>
                  </s:Rect>
                 
                  <!-- layer 1: control bar fill -->
                  <s:Rect left="1" right="1" top="1" bottom="2" >
                      <s:fill>
                          <s:LinearGradient rotation="90">
                              <s:GradientEntry color="0xEDEDED" />
                              <s:GradientEntry color="0xCDCDCD" />
                          </s:LinearGradient>
                      </s:fill>
                  </s:Rect>
                 
                  <!-- layer 2: control bar divider line -->
                  <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                      <s:fill>
                          <s:SolidColor color="0x000000" />
                      </s:fill>
                  </s:Rect>
                 
                  <!-- layer 3: control bar -->
                  <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                      <s:layout>
                          <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                      </s:layout>
                  </s:Group>
              </s:Group>
             
              <s:Scroller id="contentScroller" width="100%" height="100%" minWidth="0" minHeight="0" mouseWheel="onMouseWheel(event)">
                  <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
              </s:Scroller>
             
          </s:Group>
         
      </s:Skin>