Search code examples
javascripttwitter-bootstrapsafariz-indexpopover

Dynamically created elements are hiding Bootstrap popover

This is a pretty straight forward problem. It only occurs in Safari. I have a popover on an element. This is all well and good so far. I have an interactive element that dynamically adds a div to the DOM. Once this element is added, any popover that occurs in the same position is behind the dynamically added element (vision is obscured).

EDIT: Just to be clear the dynamic element is an iframe. I attempted adding a static iframe to the page and the problem still occurs in Safari. Is there some sort of crazy auto iframe styling that happens in Safari?

EDIT2: Maybe code examples will help show that I have tried z-index

css for dynamic element

.active_tv_screen{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:5px;
    z-index:3 !important;
}

custom styling for popover to try and force it in front of dynamic element

.popover {
    z-index: 1001 !important;
    position:absolute;
    max-height:500px !important;
}

Reminder: this problem is Safari speicific

Solution

  • Here is the fix - add ?wmode=opaque to the end of the embed url (the src attribute) and it will be fixed. The problem is the new flash player.

    Source: https://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/