It's so frustrating when elements with the CSS property 'transform' don't play nicely with embedded elements that have the property 'position: absolute'. It's driving me insane!!!
For example, when clicking on a menu item, a content div appears. If there is no 2D transform on the parent, it shows up in the right place. But as soon as you hover over its parent, it jumps to the far right. Ugh!
Is there any way to solve this issue?
Note: I can't move the embedded element (.floater) outside of the box because it's part of an ng-repeat (AngularJs repeater).
(Click and hover around to see the problem for yourself)
Here is my JsFiddle.
CSS(3):
.box {
height: 200px;
width: 200px;
border: 1px solid black;
padding: 10px;
margin:100px auto;
}
.box:hover {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.box p {
padding: 10px;
background: gray;
}
.floater {
position: absolute;
display:none;
height: 200px;
width: 200px;
border: 1px solid black;
padding: 10px;
background: #eee;
top:126px;
left:520px;
}