Menu
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
501
The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
The scale property in CSS resizes an element's width and height in proportion. So, if we have an element that's 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a scale value of . 5 decreases the dimensions in half, resulting in 50 pixels square.
A way to just get the scale values might be to remove any transforms, measure the computed width/height of the element and then add them back and measure again. Then divide new/old values.
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
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
