Google Chrome, Flash and Z-Index Wrong Behaviour

Chrome specific issue with z-index and flash

Actually, have you looked at the other 'wmode' available? I think there's a "normal" value too, which if I recall correctly will set your Flash object flat on a layer (like it should :P) in its current container.

So just make sure its within it's own DIV tag too and has a z-index setup as well.

HTML Flash embedding ain't really something I do on a daily basis (even less tested in Chrome) but hopefully this will shed some light.

Google chrome not obeying z-index when inside a fixed element.

The problem is that Chrome creates a new stacking context for elements that don't have a z-index set (default is auto). So your sidebar has a z-index of 0 which makes it (and all of its childrens) disappear since you've specified a higher z-index for your #top container.

To solve the problem, give the sidebar a z-index higher than the one from #top:

#sidebar{
width:inherit;
position: fixed;
display: block;
z-index: 501;
}

DEMO

Flash lay over position: fixed element in chrome

Its not a problem of your CSS but of your swf object. You have to set the wmode of your embed to transparent. Otherwise it will lay over all other elements.

<object>
<embed wmode="transparent" height="550" width="733">
</object>

Flash object is not working after update of google chrome

This issue may be caused by the dreaded 'Pepper' Flash Player, which has also been breaking Flash content for me in Chrome.

I don't know what the solution is for your broader audience of Chrome visitors, but to fix the problem locally:

  • In a new tab, go to the URL: chrome://plugins/
  • Find the entry for 'Flash' and expand [+] Details if not already expanded
  • Look for the entry where the location of the plugin ends: ...PepperFlash\pepflashplayer.dll and click 'Disable'
  • You will hopefully have at least one other instance of Flash Player installed (if not, try installing a debug player from Adobe's website), and enable one of these.

I should mention, the Pepper Flash Player seems to regularly re-enable itself, possibly whenever Chome auto-updates itself, and I find myself having to repeat this process every couple of days.

Flash overlapping / wmode Issue

First of all, this problem is not reproductive in Safari 5.1.2 and Firefox 9.0.1 (Mac versions). Without knowing your browser, I can only say that since you are using an iframe tag to point a page where Flash is actually embedded, wmode has no effect in your current DOM document, as it is not a valid property of iframe tag (it belongs to embed tag). You'd need to set css property display to block value on the iframe tag in order to to make a browser treat your iframe as a standard layout object. Then, you could set the layer distribution and positioning via CSS.

Google Chrome swf issue with allow button

Will digging into this i found the solution of my question.

The container of the flash object did have a style of "border-radius" removing this solved the issue.



Related Topics



Leave a reply



Submit