Parent and child visibility on 2012 platform

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

Different visibility calculations when both parent and child elements have visibility property set.

Contents

When the visibility of the child element is not set, it inherits the visibility from parent. However, when the child element has its own visibility property defined it depends on the platform browser whether it will be displayed or not.

Source Files

Note

The files needed for the sample application are here.

Webkit 2012

The child operates with its own visibility property, regardless of visibility settings for parent

Maple 2010-2011

The child operates with parent visibility property, regardless of its own settings

Solution

In order to make the result look the same on both platforms, remove the visibility property from child element.

Bad example

<div style="position: absolute; width: 960px; height: 516px; visibility: hidden;">
    <img style="position: absolute; visibility: visible; width: 100px; height: 50px; background-color: orange;">
</div>

Good example

<div style="position: absolute; width: 960px; height: 516px; visibility: hidden;">
    <img style="position: absolute; width: 100px; height: 50px; background-color: orange;">
</div>