Flash lay over position: fixed element in chrome

Question

Normally, I'm using firefox when I'm writing css codes. But my codes have problem when using chrome.

My fixed menu:

header{
  background-color: #2bd5ec;
  overflow:hidden;
  line-height: 200%;
  top:0;
  position:fixed;
  width:100%;
  z-index: 1;
}

And when i'm scrolling the page my swf file is on behind. My css codes of swf file.

#swfFile{width: 500px;height: 500px;}

But when I'm using chrome swf file is in front of menu. What I have to change?

@user1648692 Please only provide the resulting, relevant HTML. Not the whole PHP file. — Chris, Sep 05 '12 at 19:33
possible duplicate of [Google Chrome, Flash and z-index wrong behaviour](http://stackoverflow.com/questions/4313364/google-chrome-flash-and-z-index-wrong-behaviour) — Andreas Köberle, Sep 05 '12 at 19:49
@AndreasKöberle solved. I have added wmode="tranparent" parameter to embed tag. Write this as answer. I'll vote as best answer. — user1648692, Sep 05 '12 at 19:53

score 2 · Answer 1 · answered Sep 21 '12 at 11:41

it is a chrome bug. chrome can not handle a div with position:fixed AND overflow:hidden AND a flashobject inside that div. stripped example (the wmode-param is not necessary to have a problem):

<html>
 <head>
  <title>chromebug</title>
 </head>
 <body>
  <div style="min-height:10000px;">CONTENT</div>
  <div style="position: fixed;overflow:hidden;background-color: #000000; bottom: 0; left: 0;">
    <object type="application/x-shockwave-flash" width='400px;' height='100px' data="banner.swf">
     <param name="wmode" value="transparent">
    </object>
  </div>
 </body>
</html>

online here: http://bytepirates.com/cbug.html

solution: remove the overflow:hidden

Andreas Köberle · Accepted Answer · 2012-09-05T19:57:23.463

0

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>

edited Sep 05 '12 at 19:57

answered Sep 05 '12 at 19:39

Andreas Köberle

88,409
51
246
277

I have added this code to – user1648692 Sep 05 '12 at 19:42
sorry has to `transparent` not `opaque` – Andreas Köberle Sep 05 '12 at 19:44
add this link to your answer: http://stackoverflow.com/questions/4313364/google-chrome-flash-and-z-index-wrong-behaviour – user1648692 Sep 05 '12 at 19:57

Flash lay over position: fixed element in chrome

2 Answers2

Linked