0 Replies Latest reply on Jan 29, 2014 2:35 AM by FemkeR

    ie9 flash object not showing when wmode is set

    FemkeR Level 1

      I'm searching and searching but do not find any solution for this.

      We're having a flex web application that is working fine until now. We're using until recently the google maps flash api, unfortunately this is already deprecated and will disappear completely in september 2014. Therefor we moved the whole integration to the js v3 api, which is working fine. The whole thing is an overlay over the application, since everything is moved to js, I added the property wmode to the object in html and set it to opaque in order to be able to layer everything. It's working fine for most people, but some (including my boss) are seeing a blank screen. Seems that nothing happens (although the swf loads), and I can not figure out why. Same browser (ie 9 or 10), same flash player version (11.6.xxx). Browser cache cleared, flash player cache cleared...

      Somebody having a clue? Removing the wmode-property solves the issue, but then I'm not be able to get my map on top of the application.

      The swf is definetly loading since I see calls made to the server in order to login etc. It's also not a flash player issue. The swf-file is directly accessable and rendering if done so.




      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <!-- saved from url=(0014)about:internet -->
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
      Smart developers always View Source. 
      This application was built using Adobe Flex, an open source framework
      for building rich Internet applications that get delivered via the
      Flash Player or to desktops via Adobe AIR. 
      Learn more about Flex at http://flex.org 
      // -->
          <meta name="google" value="notranslate" />   
          <meta http-equiv="X-UA-Compatible" content="IE=10; IE=9;"/>      
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
               the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
               the percentage of the height of its parent container, which has to be set explicitly.  Fix for
               Firefox 3.6 focus border issues.  Initially, don't display flashContent div so it won't show 
               if JavaScript disabled.
          <style type="text/css" media="screen"> 
              html, body  { height:100%; }
              body { margin:0; padding:0; overflow:hidden; text-align:center; 
                     background-color: ${bgcolor}; }   
              object:focus { outline:none; }
              #flashContent { display:none;}
          <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
          <!-- BEGIN Browser History required section ${useBrowserHistory}>
          <link rel="stylesheet" type="text/css" href="history/history.css" />
          <script type="text/javascript" src="history/history.js"></script>
          <!${useBrowserHistory} END Browser History required section -->  
          <!--  BEGIN OogScreening -->
          <script src="PlusOptixSync.js" language="javascript"></script>
          <!--  END OogScreening -->
           <script language="javascript">
              function getEIDxml()
                var strXML = document.MirageApplet.readCardAsXMLString() + " ";
                return strXML;
              function setOuterSize()
                  var nomWidth = 1280;
                  var nomHeight = 800; // 786 viewable in fullscreen
                  var actWidth = nomWidth;
                  var actHeight = nomHeight + 150 - 30; // fullscreen change coeff (ruimte die we winnen door f11) - taakbalk
                  window.resizeTo(actWidth, actHeight);
                  //window.outerWidth = actWidth;
                  //window.outerHeight = actHeight;
                  //script die de F1 help functionaliteit van de browser afzet. Dit is nodig omdat IE de F1 functionaliteit van de flex applicatie onderdrukt
                  document.onhelp=new Function("return false");
                  window.onhelp=new Function("return false");
          <script type="text/javascript" src="swfobject.js"></script>
          <script type="text/javascript">
              // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. 
              var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
              // To use express install, set to playerProductInstall.swf, otherwise the empty string. 
              var xiSwfUrlStr = "${expressInstallSwf}";
              var flashvars = {};
              var params = {};
              params.quality = "high";
              params.bgcolor = "${bgcolor}";
              params.allowscriptaccess = "sameDomain";
              params.allowfullscreen = "true";
              params.wmode = "transparent";
              var attributes = {};
              attributes.id = "${application}";
              attributes.name = "${application}";
              attributes.align = "middle";
                  "${swf}.swf", "flashContent", 
                  "${width}", "${height}", 
                  swfVersionStr, xiSwfUrlStr, 
                  flashvars, params, attributes);
              // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
              swfobject.createCSS("#flashContent", "display:block;text-align:left;");
            <!-- Groeicurven 5.0 scripts -->
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="http://code.highcharts.com/modules/exporting.js"></script>
            <script type="text/javascript" src="../js/util/Namespace.js"></script>  
            <script type="text/javascript" src="../js/util/mirage-services.js"></script>
            <script type="text/javascript" src="../js/util/mirage-binding-utils.js"></script>
            <script type="text/javascript" src="../js/util/mirage-event-dispatcher.js"></script>
            <script type="text/javascript" src="../js/util/groeicurven-highcharts-constants.js"></script> 
            <script type="text/javascript" src="../js/util/groeicurven-highcharts-theme.js"></script>  
            <script type="text/javascript" src="../js/util/groeicurven-highcharts-config.js"></script>
            <script type="text/javascript" src="../js/util/groeicurven-highcharts-factory.js"></script>  
            <script type="text/javascript" src="../js/util/groeicurven-highcharts-zoomer.js"></script>
            <script type="text/javascript" src="../js/util/groeicurven-highcharts-formatter.js"></script>       
            <script type="text/javascript" src="../js/util/groeicurven-highcharts-prototype.js"></script> 
            <script type="text/javascript" src="../js/groeicurven-events.js"></script>              
            <script type="text/javascript" src="../js/groeicurven-controller.js"></script>
            <script type="text/javascript" src="../js/groeicurven-flex-bridge.js"></script> 
            <script language="javascript">
          <!--  BEGIN GoogleMaps -->
          <link rel="stylesheet" href="../css/google-maps.css">
          <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
          <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
          <script type="text/javascript" src="../js/util/cvi_busy_lib.js"></script>
          <script type="text/javascript" src="../js/google-maps-events.js"></script>
          <script type="text/javascript" src="../js/google-maps-controller.js"></script>
          <script type="text/javascript" src="../js/google-maps-mediator.js"></script>
          <script language="javascript">
              function openMaps(data)
                  document.getElementById('mapsContent').style.visibility ="visible";
                  document.getElementById('optionsList').style.visibility ="visible";
                  document.getElementById('activeCheckboxDiv').style.visibility ="visible";
                  document.getElementById('mapsContent').style.zIndex = 100;
              function adresFoundHandler(marker, filtereEnabled){
                  document.getElementById('mapsContent').style.visibility ="hidden";
                  document.getElementById('optionsList').style.visibility ="hidden";
                  document.getElementById('activeCheckboxDiv').style.visibility ="hidden";
                  document.getElementById('activeCheckbox').style.visibility ="hidden";
                  document.getElementById('mapsContent').style.zIndex = 0;
                  ${application}.responseGoogleMaps(marker, filtereEnabled);
          <!--  END GoogleMaps -->    
      <body scroll="no" onLoad="setOuterSize();">
          <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
               JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
               when JavaScript is disabled.
          <div id="flashContent">
                  To view this page ensure that Adobe Flash Player version 
                  ${version_major}.${version_minor}.${version_revision} or greater is installed. 
              <script type="text/javascript"> 
                  document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}" id="${application}">
                  <param name="movie" value="${swf}.swf" />
                  <param name="quality" value="high" />
                  <param name="bgcolor" value="${bgcolor}" />
                  <param name="allowScriptAccess" value="sameDomain" />
                  <param name="allowFullScreen" value="true" />
                  <param name="wmode" value="transparent" />
                  <!--[if !IE]>-->
                  <object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
                      <param name="quality" value="high" />
                      <param name="bgcolor" value="${bgcolor}" />
                      <param name="allowScriptAccess" value="sameDomain" />
                      <param name="allowFullScreen" value="true" />
                  <!--[if gte IE 6]>-->
                          Either scripts and active content are not permitted to run or Adobe Flash Player version
                          ${version_major}.${version_minor}.${version_revision} or greater is not installed.
                      <a href="http://www.adobe.com/go/getflashplayer">
                          <img src="get_flash_player.gif" alt="Get Adobe Flash Player" />
                  <!--[if !IE]>-->
          <noscript>Your browser does not support JavaScript!</noscript>
            id ="MirageApplet"
            codebase = "AppletLibs"
            archive  = "kg-eid-tools-2.6.jar,beidlib-1.1.jar,jdom-1.0.jar,joda-time-1.6.jar,commons-lang-2.4.jar"
            code     = "be.kg.mirage.MirageApplet.class"
            name     = "MirageApplet"
            hspace   = "0"
            vspace   = "0"
            style="width: 0px; height: 0px;">
              <param name="Reader" value="">
              <param name="OCSP" value="0">
              <param name="CRL" value="0">
              <param name="DisableWarning" value="true">
          <div id ="mapsContent">
              <h3 id="typeLabel">Google Maps</h3>
              <select id="optionsList"></select>
              <input id="searchInput" type="text"></input>
              <div id="activeCheckboxDiv">
                  <input id="activeCheckbox" type="checkbox"></input>
                  <label for="activeCheckbox">Toon enkel actieve locaties</label>
              <button id="searchButton" type="button" class="secondElementButton">Zoeken</button>
              <button id="annuleerButton" type="button" class="annuleerButton">Annuleer</button>
              <ul id="locations" class="thirdElement"></ul>
              <div id="canvasMap"></div>