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%.