1 Reply Latest reply on Nov 10, 2011 11:12 AM by Uma Vennila

    Flex and HTML display shift in Safari in Mac OS

    Uma Vennila

      When a popup is displayed in Flex app, the Flex display gets shifted down in Safari in Mac OS alone. However, even if the display is shifted down, the controls seem to be in the correct position. For example, for clicking a button, the cursor has to be some pixels above the shown display. Not only the Flex display shifts down. HTML Links display also shifts down along with Flex and Links are clickable some pixels above the display.

       

      The problem happens only while triggering the Flex popup display in long flex screen. On a Flex screen within the browser height, with the same actionscript and Javacsript code, there is no problem.

      This works fine in all other browsers including Safari in windows.

       

      Has anyone faced this scenario? Any help will be highly appreciated.

      For the popup to be displayed in center of viewable area, the following code is used.

       

      callLater(SMBObjectUtil.changePosition,args);

       

      In SMBObjectUtil.as file,

      public static function changePosition(x:int, y:int, obj:UIComponent):void {

           var yPos:int = ExternalInterface.call("findScrollTop");

           var winHeight:int = ExternalInterface.call("getWindowHeight");

           var appHeight:int = Application.application.height;

           var objectWidth:int = obj.width;

           var objectHeight:int = obj.height;

           var calculatedX:int = 0;

           var calculatedY:int = 0;

           if(Application.application.width>obj.width) {

                try {

                     calculatedX = (Application.application.width - obj.width)/2;

                     if(yPos <= 0){

                          calculatedY = ((winHeight-objectHeight)/2-100)>0?(winHeight-objectHeight)/2-100:50;

                     }

      else if(yPos<=(appHeight-winHeight)){

                          calculatedY = (((winHeight-objectHeight)/2)+yPos-100)>0?((winHeight-objectHeight)/2)+yPos-100:50;

                     }

      else if(yPos>(appHeight-winHeight)){

                          calculatedY = appHeight - objectHeight - (winHeight-objectHeight)/2;

                     }

                }

                catch(e:Error){

                }

           }

      else {

           }

      obj.x = calculatedX;

      obj.y = calculatedY;

      }

       

      Javascript functions used are:

      function findScrollTop()
      {
        var ScrollTop = document.body.scrollTop;
        if (ScrollTop == 0)
        {
         if (window.pageYOffset)
          ScrollTop = window.pageYOffset;
         else
          ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
         }
        return ScrollTop;
      }

      function getWindowHeight()
      {
        var y = 0;
        if (self.innerHeight) {
         y = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) {
         y = document.documentElement.clientHeight;
        } else if (document.body) {
         y = document.body.clientHeight;
        }
        return y;
      }