There's a div that functions as my "popup," and I'm animating it to appear in the exact center of its parent div. To achieve this, I'm utilizing absolute positioning, negative margins, and adjusting the left and top properties. This allows me to easily animate it using
-webkit-transform: translateY(-100%)In Chrome and Firefox, using pixels produces the desired effect. Even when all percentages are used but the parent div width is set in pixels, everything works fine. However, when solely relying on percentages, Firefox and Chrome seem to render the values strangely, based on an unclear factor.
Fiddle Example: Viewing this in both Safari and FF/Chrome reveals that Safari renders #pixels the same way the percentage-based #percents should be rendered equally in both browsers. Could it be Safari that's misinterpreting this?
<div class="container">
<div class="pretendImage"></div>
<div id="percents"></div>
</div>
This is my CSS:
#percents {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
margin: -50% 0 0 -50%;
}
.container {
position: relative;
width: 50%;
height: auto;
}
.pretendImage {
width: 200px;
height: 200px;
}
I did find a workaround by introducing an additional wrapper. Nevertheless, I am interested in understanding the root cause behind this behavior.
My workaround: Fiddle utilizes a wrapper to eliminate the need for calculating the top and margins within the inner div which has dimensions set to 80% width and height.