I have a container element with long content which is scaled:
.container {
transform: scale(0.9);
}
inside this container I have a child div
which is used to be a popup. It's positioned absolute with top 50%
.popup {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
}
but unfortunately when container is scaled this 50%
is not working. I need to use ~240%
if it appears on the bottom of a page.
Do you now some specifics on applying positioning on children of scaled elements?
DEMO: http://labs.voronianski.com/test/scaled-positioning.html
Add to .wrap
:
.wrap {
...
position: relative;
/*some prefix*/-transform-origin: 0 0;
}
You'll need to reposition the .popup
(now the reference frame is the .wrap
, instead of the html
element), but in Chrome the scale toggle works fine after this change.
See: When using CSS Scale in Firefox, element keeps original position