Pop-up elements not shown on 2012 platform

Published 2014-10-28 | (Compatible with SDK 3.5,4.5,5.0,5.1 and 2012,2013,2014 models)

Difference in parent and child z-index interpretation on 2012 platform

Contents

If some elements of your pop-up windows are hidden on 2012 platform, but look correctly on older devices, please verify all the elements’ z-index settings. This problem is caused by the parent and child z-index interpretation differences between Maple and Webkit browsers.

Webkit 2012

The own z-index value is used, regardless of parent’s style settings. If some element has a lower z-index value than its parent, it is hidden behind the parent.

Webkit - child element is hidden, as it has a lower z-index value than its parent

Maple 2010-2011

Parent z-index value is applied to all child elements, regardless of their own settings.

Maple - child element is shown, because parent z-index value is applied

Source Files

Note

Refer to files in this package.

Solution

It is strongly recommended to apply one single z-index value for the whole component and to avoid individual z-index settings for each of its elements. If some of the elements require setting their own value, please verify whether it’s equal or greater than parent’s z-index.

Bad example

#mydiv {
    position: absolute;
    top: 150px;
    left: 375px;
    height: 100px;
    width: 100px;
    background-color: #0f0;
}

#div1 {
    position: absolute;
    top: 25px;
    left: 25px;
    height: 50px;
    width: 50px;
    z-index: -1;
    background-color: #f00;
}

Good example

#mydiv {
    position: absolute;
    top: 150px;
    left: 375px;
    height: 100px;
    width: 100px;
    background-color: #0f0;
}

#div1 {
    position: absolute;
    top: 25px;
    left: 25px;
    height: 50px;
    width: 50px;
    z-index: 5;  /*Change the value of z-index from -1 to 5 to check the issue*/
    background-color: #f00;
}