0

Chrome and IE handle the scaling of fixed child elements differently. I have the following HTML:

<div id="wrapper">
  Some Text
  <div id="fixed">Test Element</div>
</div>

When the wrapper is zoomed via CSS zoom, in IE, the #fixed element is not zoomed. In chrome however it is. In my specific case I would want to have the IE behaviour also in chrome, which would be possible with recalculating the zoom like so:

currentZoom = 1.5;
negativeZoom = 1 / currentZoom;
$('#fixed').css('zoom', negativeZoom);

However, this leads to further problems, as a lot of drag&dropping happens on this page. Is there any attribute like "ignore zoom" for child elements? Or any other obvious solution I'm missing? Taking the #fixed div out of the wrapper is not possible unfortunatly. For all how want to give it a go I prepared a little jsFiddle.

Michael Kunst
  • 2,978
  • 25
  • 40
  • Related, but not a duplicate in my opinion: https://stackoverflow.com/questions/15233076/prevent-that-a-fixed-element-resizes-when-zooming-on-touchscreen – Michael Kunst May 23 '17 at 09:40
  • 1
    I think there is no uniform implementation [see here](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom) – hydrococcus May 23 '17 at 09:45

0 Answers0