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

[jwheare]

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?

[indianburger]

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

[jwheare]

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

[indianburger]

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

[jwheare]

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!

[indianburger]

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

[niall]