Bug 38443 – Flash video in iframe stays on top of everything (no matter what z-index)

• Component: New Bugs
• Status: RESOLVED INVALID

[Artur]

This only happens on Windows -- Mac OS X is fine.

Check out the provided URL (http://173.203.83.120/flash-bug) using any recent WebKit version.  The correct result is supposed to have the red div on top of the iframe.  Note that WebKit ignores the rather disparate z-indexes; it doesn't matter whether or not you have z-indices there, or by how much they differ.  The flash video always stays on top of EVERYTHING.

I've confirmed this bug with the latest available WebKit nightly build (r58532) and Chrome 4.1.249.1064 (45376).

Again, on a Mac, the correct result is observed with both Safari and Chrome.

-Artur

[Alexey Proskuryakov]

<rdar://problem/7936097>

[Alexey Proskuryakov]

Is this a problem only when using a nightly build? Or does it also happen with Safari/WebKit 4.0.5?

[Artur]

(In reply to comment #2)
> Is this a problem only when using a nightly build? Or does it also happen with
> Safari/WebKit 4.0.5?

I don't know exactly what version of Safari I had prior to getting the WebKit nightly build, but it was downloaded from the Apple site on May 2nd.  If I'm not mistaken, it also had the same bug.

I have originally discovered the bug on Chrome, which was not a nightly build (see version details in original message).

[Jon Honeycutt]

I see the plug-in overlaying the red div on Safari 4.0.4 and Safari using ToT WebKit on 64-bit Snow Leopard.

[Artur]

(In reply to comment #4)
> I see the plug-in overlaying the red div on Safari 4.0.4 and Safari using ToT
> WebKit on 64-bit Snow Leopard.

I see no overlay using Safari 4.0.5 (5531.22.7), or Chrome 5.0.342.9 on Mac OS X 10.5.8.

[Artur]

Hi,

Just checking in--could anyone reproduce this?  (see given URL)

Also, any chance someone with a dev platform for Windows can take look into this bug?  It's killing our app, and we have no experience with the WebKit source.

Please shoot me a msg if further clarification is necessary.

Thanks in advance!

[Jon Honeycutt]

Yes, I can reproduce this, and I believe it is expected behavior. If you want the Flash plug-in to composite with other elements in the page, you need to use the transparent wmode.

[Artur]

(In reply to comment #7)
> Yes, I can reproduce this, and I believe it is expected behavior. If you want the Flash plug-in to composite with other elements in the page, you need to use the transparent wmode.

What if I have no control over the wmode, such as when the Flash object is within a frame from a different origin (our case)?  This makes it impossible for us to bring up important modal dialogs or pull-down menus on top of the Flash object.  It kills us.

Note that all browsers in all platforms we've tried--except for WebKit on Windows--seem to implement this differently.  We checked Firefox-Mac, Firefox-Windows, WebKit-Mac, IE-Win, and Opera-Mac.  (It doesn't help to sandbox the iframe, as this gives rise to a whole new set of issues, see e.g. https://bugs.webkit.org/show_bug.cgi?id=39219).

My question is: what's so special about Flash objects (or any plugin for that matter) that makes them have layering priority over *all* other HTML elements?  Please correct if I'm mistaken, but it seems to me that such 'power' is unique to plugins; other HTML elements nicely obey z-indices.  We have only experienced this overlap issue with Flash videos.

Thanks for your help and attention!

[Jon Honeycutt]

> Note that all browsers in all platforms we've tried--except for WebKit on Windows--seem to implement this differently.  We checked Firefox-Mac, Firefox-Windows, WebKit-Mac, IE-Win, and Opera-Mac.  (It doesn't help to sandbox the iframe, as this gives rise to a whole new set of issues, see e.g. https://bugs.webkit.org/show_bug.cgi?id=39219).

The behavior of browsers here is varied; Firefox-win 3.6 puts the div on top, but in my testing, Firefox-win 3.5 doesn't, IE8 doesn't, and Opera-win 10.53 doesn't, so I don't see that WebKit on Windows is an outlier. Which versions of IE and Firefox did you test?

> 
> My question is: what's so special about Flash objects (or any plugin for that matter) that makes them have layering priority over *all* other HTML elements?  Please correct if I'm mistaken, but it seems to me that such 'power' is unique to plugins; other HTML elements nicely obey z-indices.  We have only experienced this overlap issue with Flash videos.

On Windows, Flash can paint with or without its own window. If it uses a window for painting, this window is a child window of the WebView, so it will paint on top of all other content in the WebView. If it paints without using a window, it draws into a layer that WebKit can composite with the rest of the page.

This is controlled by the wmode attribute; see http://kb2.adobe.com/cps/155/tn_15523.html.

Firefox-win 3.6.3 does have some interesting behavior where they allow opaque content to appear to layer on top of a windowed plug-in, but this seems a little strange to me, and I'm not yet sure that we need to match that behavior.

[Artur]

Hi Jon,

(In reply to comment #9)
> The behavior of browsers here is varied; Firefox-win 3.6 puts the div on top, but in my testing, Firefox-win 3.5 doesn't, IE8 doesn't, and Opera-win 10.53 doesn't, so I don't see that WebKit on Windows is an outlier. Which versions of IE and Firefox did you test?


Sorry, the URL I gave hasn't been updated for my latest tests.  Please try again.  (The difference is that instead of an iframe and a div, now I'm using two iframes; this only seems to affect IE).

Here's the list of browsers and versions where (unlike WebKit-Win) the red box comes on top:

- IE8-Win (both in standards and compatibility mode, i.e. IE7-like)
- Firefox-Win 3.6.3
- Firefox-Mac 3.6.3
- Firefox-Mac 3.0
- Chrome-Mac 5.0.375
- WebKit-Mac 4.0.5 (5531.22.7)

Opera-Mac 10.10 behaves strangely; sometimes the red box comes on top, sometimes not.  (Every time I alternate between tabs I seem to get a different result...)

Opera-Win 10.53 displays the Flash video on top of the red box, like WebKit-Win.

I didn't mean to use this list as the main argument though; it was a side note.  Of course, the intended behavior should make sense regardless of what other browsers and versions are doing.


> On Windows, Flash can paint with or without its own window. If it uses a window for painting, this window is a child window of the WebView, so it will paint on top of all other content in the WebView. If it paints without using a window, it draws into a layer that WebKit can composite with the rest of the page.
> 
> This is controlled by the wmode attribute; see http://kb2.adobe.com/cps/155/tn_15523.html.


I understand this, and that's perfectly reasonable assuming one has control over wmode.

But that doesn't apply in the context I'm talking about: Since the framed content is from a third party, the wmode is beyond our control.

And *in this case*, I see no reason why a Flash object should behave differently from all other HTML elements.  (If this is meant as a solution to Clickjacking, that's another debate altogether. IMHO the solution should be consistent and part of a grander scheme, and not just limited to plugins).

Don't you agree that a more reasonable behavior is for the browser to override the third-party wmode so as to normalize the behavior across all types of elements?

[oliver]

I have confirmed that this happens in Mac OSX with Safari 5.
Chrome seems to work fine.
This problem is not limited to Flash.
I have embedded HTML5 video into an iFrame and same thing happens - video is on top level - cannot see my drop down menus even though they are on z-index 900.
other objects in iFrames (text, images) are fine. it seems to only be media objects.
I have a couple hundred sites that are being affected by this bug.
I have done extensive testing. this did not occur in Safari 4, nor does it occur in any other browser.
here is a sample page where the drop down menu (z-index 900) is covered by flash object in iFrame.
http://www.sample.easyprowebtools.com/index.php?template=love

[oliver]

sorry, forgot to mention that wmode is and always has been set to transparent.
wmode is NOT the problem.

[oliver]

my apologies, I did not have the latest nightly build.
it seems that this problem has been fixed for Mac OSX.
not sure about windows version.

[Fernando]

I'm having the same problem in Mac Snow Leopard. The flash content is overlaying logos, images and text like the problem described in this web http://forums.adobe.com/message/2890904#2890904 . If you read all you can note that the only affected OS is Snow Leopard + Safari 5 + Flash 10.1. I know that Google Chrome use webkit too but the problem isn't present on it. Please if you know how to solve this problem please post the solution here.

Fernando

[Fernando]

oliver that's true I tried with a nightly build of webkit and the problem is solved! I hope that Apple will update the webkit engine on Safari 5 soon.

Fernando

[oliver]

It looks like this bug is back again.
here is a page to show it: http://www.test1.easyprowebtools.com/
the flash object in the iframe is above the drop down menu which is on z-index 900
I just downloaded the latest build to test it.
and it does not happen in Google Chrome.

[oliver]

UPDATE: it appears this bug only happens when the iFrame alignment is set to right or left. but it happens all the time when I'm in tinymce (cms) even if no alignment is set.

Please fix this soon. I have hundreds of websites affected by this.
Safari "finally" did an update, but it's still messed up.
it's now been 2 months that my customer's websites have worked improperly on Safari.

What really irritates me is the fact that Google Chrome works perfectly all the time.
What's the deal with that??????

[Jon Honeycutt]

(In reply to comment #16)
> It looks like this bug is back again.
> here is a page to show it: http://www.test1.easyprowebtools.com/
> the flash object in the iframe is above the drop down menu which is on z-index 900
> I just downloaded the latest build to test it.
> and it does not happen in Google Chrome.

I am not able to reproduce this issue on the above site on Windows using Safari 5.0.1 with Flash 10.1 r53. Can you verify the versions of Safari, Flash player, and Windows that you're using? And the drop-down menu that you're talking about is the one that appears under "HOME"?

[oliver]

Sorry, to specify, this only happens on Safari 5 and 5.0.1 on a Mac (I am on Snow Leopard).
Flash player version is irrelevant because it also happens with HTML5 embedded video.
I don't know about Windows.

[Jon Honeycutt]

(In reply to comment #19)
> Sorry, to specify, this only happens on Safari 5 and 5.0.1 on a Mac (I am on Snow Leopard).
> Flash player version is irrelevant because it also happens with HTML5 embedded video.
> I don't know about Windows.

This bug is about this issue on Windows. If you see this on Mac, you should file a separate bug.

However, I also cannot reproduce this issue using Safari 5.0.1 with the latest Flash player on Snow Leopard.

[oliver]

Did you go to this page to test it:
http://www.test1.easyprowebtools.com/
also, please switch user agent to iPad and refresh page so you see the HTML5 embedded video.
does that one also work properly and not cover up the drop down menu?

[Jon Honeycutt]

(In reply to comment #21)
> Did you go to this page to test it:
> http://www.test1.easyprowebtools.com/
> also, please switch user agent to iPad and refresh page so you see the HTML5 embedded video.
> does that one also work properly and not cover up the drop down menu?

Yes, I went to that page. I see the same behavior when the page uses the <video> tag: the menu appears on top of the video. Please file a new bug to continue to discuss this issue for the Mac, thanks!

[Jon Honeycutt]

I filed bug #43376 to cover the issue on Mac.

[Ingo Chao]

We added -webkit-transform: translate3d(0,0,0); to the parent element of the iframe.

[andrea holly]

Created attachment 253046 [details]
photos

[WebKit Commit Bot]

Attachment 253046 [details] did not pass style-queue:


Total errors found: 0 in 0 files


If any of these errors are false positives, please file a bug against check-webkit-style.

[Simon Fraser (smfr)]

Comment on attachment 253046 [details]
photos

Spam.

[Brent Fulgham]

We no longer support any plugins.