Z-index for shadow DOM embedded tweets breaks DOM order layering

embeddedtweet
shadow-dom

#1

This is a bit of an anti-pattern that means the host website needs to constantly fight z-index with the embed in order to overlay anything on top of it, e.g. a modal dialog, which could otherwise just use DOM ordering.

.MediaCard-borderOverlay { z-index: 10; }

Not a problem with iframes. Any way you can find a way to not resort to z-index?


#2

Hello @jwheare, can you try now? We deployed a few bug fixes and think should be covered.


#3

Nope, I’m still seeing that z-index on .MediaCard-borderOverlay


#4

Should not matter, hopefully. We create a new stacking context with transform, so our z-index should not affect yours. Here’s a reduced example that we used to fix the bug on our side: http://jsbin.com/tozoza/edit?html,output


#5

Hmm, odd. In spite of that it was still incorrectly stacking when I tested it before, but it does seem to be fixed now. Perhaps a stale cache. Thanks!


#6

. Glad it worked out, and thank you so much for sharing it here so we could fix it.


#7