CSS: Wrong position of "transform: scale();" container children

Question

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

Does this answer your question? [When using CSS Scale in Firefox, element keeps original position](https://stackoverflow.com/questions/7980648/when-using-css-scale-in-firefox-element-keeps-original-position) — Vega, Apr 17 '20 at 14:17

score 34 · Accepted Answer · edited May 23 '17 at 12:34

34

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

edited May 23 '17 at 12:34

Community

1
1

answered Sep 22 '13 at 16:25

rvidal

2,012
1
17
24

CSS: Wrong position of "transform: scale();" container children

1 Answers1

Linked