Zooming messes up contents of iframe

[ShakoFarhad]

The zoom buttons are adding percentage width and height to the body of the iframe and scaling up in other places. This way leads to the iframe contents breaking as you are making changes inside the iframe. The contents of the iframe should be left alone so that scenes are consistent.

Best way to implement zoom is to add :transform "scale()" to the iframe component with :transform-origin "left top". Then scale down the width and height of the outer container. Example:

[:div#outer-container
 {:style {:width "960px"
          :height "540px"
          :overflow "hidden"}}
 [:iframe
  {:style {:width "1920px"
           :height "1080px"
           :transform "scale(0.5)"
           :transform-origin "left top"}}]]

Here the iframe contents will display as normal but the whole view has shrinked 50%.

[cjohansen]

The zoom already uses transform with the suggested transform origin. But like you say, it also increases the body width and height. I can't quite remember why I did this, but I also don't see any effects of it in my tests. How does it trip you up?

[ShakoFarhad]

Adding heights and widths changes inside the iframe will lead to inconcistent visuals for the components inside. For example if I have a component that uses viewport units like vh and vw and you increase the body of the component with 150% then the component will still only take up whatever the iframe width and height is. That is why it is best to do zoom as I have outlined above. It will make sure that the iframe gets smaller/bigger, and the contents stay concistent.