Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Issue with flash widgets displaying across all tabs

    I'm finding an issue with embedding flash videos into a tab and switching out of that tab. The video persists over the second tab, although the user cannot interact with it. I found this thread from 2009 (http://forums.smartclient.com/showthread.php?t=4356), but it didn't have a definitive answer to solve the issue. Here is a simple HTML mock up of the issue I'm having.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script>var isomorphicDir="isomorphic/";</script>
    		<script SRC="isomorphic/system/modules/ISC_Core.js"></script>
    		<script SRC="isomorphic/system/modules/ISC_Foundation.js"></script>
    		<script SRC="isomorphic/system/modules/ISC_Containers.js"></script>
    		<script SRC="isomorphic/system/modules/ISC_Grids.js"></script>
    		<script SRC="isomorphic/system/modules/ISC_Forms.js"></script>
    		<script SRC="isomorphic/system/modules/ISC_DataBinding.js"></script>
    		<script SRC="isomorphic/skins/Enterprise/load_skin.js"></script>
    	</head>
    <body>
    
    <script>
    
    isc.TabSet.create({
    	ID: "myTabSet",
    	height:650,
    	width:650,
    	tabs: [
    		{
    		title: "Gagnam Style", 
    		pane: isc.HTMLFlow.create({
    		ID: "myHTMLFlow",
    		width: 600,
    		height: 600,
    		contents: '<div><iframe width="560" height="315" src="http://www.youtube.com/embed/9bZkp7q19f0?wmode=opaque" frameborder="0" allowfullscreen></iframe></div>'	
    		})
    	},
    		{
    		title: "Not Gangnam style", 
    		pane: isc.HTMLFlow.create({
    			ID: "myOtherHTMLFlow",
    			width: 600,
    			height: 600,
    			contents: '<div id="myDiv" style="color: white; font-size:25px;">Hello, this is tab two</div>'	
    		})
    		}
    	]
    });
    
    </script>
    </body>
    </html>
    SmartClient Version: v9.0p_2013-11-07/Pro Deployment (built 2013-11-07)

    Browser: Chrome v31.0.1650.63
    Firefox 26.0 and IE8 do not fail the test. However, in my own application the flash video is showing through in both FF and IE.
    Last edited by ithurlow; 23 Jan 2014, 16:19.

    #2
    We've taken a look, and it seems Chrome has introduced another plugin visibility bug. This kind of thing is fixed and then broken again in various Chrome releases.

    There is an undocumented property, canvas.hideUsingDisplayNone, which adds CSS display:none when a Canvas is hidden. This is redundant but works around Chrome's bug in this instance.

    However there appears to be an issue with this setting where it only actually works on the second hide - we're looking at fixing that.

    Finally, if possible you should make the framework aware that you're using an iframe since that requires a whole set of workarounds across different browsers. You could do so by using these properties in place of just "contents":

    Code:
    contentsType:"page",
    contentsURL:"http://www.youtube.com/embed/9bZkp7q19f0?wmode=opaque",
    If you can't do this for some reason, you should at least take a look at canvas.dragMask to prevent problems with dragging across iframes.

    Comment


      #3
      We've now fixed the issue where display:none would not be applied for some cases of hiding (it was actually related to bad use of autoDraw in the test case - see Canvas.autoDraw).

      We've also documented hideUsingDisplayNone as a not-generally-supported property, but one that can be tried out as a workaround for browser bugs like these.

      Comment

      Working...
      X