How can I zoom an HTML element in Firefox and Opera

Question

How can I zoom an HTML element in Firefox and Opera   The zoom property is working in IE  Google Chrome and Safari  but it   s not working in Firefox and Opera   Is there any method for adding this property to Firefox and Opera

User · Answer

I ve been swearing at this for a while  Zoom is definitely not the solutions  it works in chrome  it works partially in IE but moves the entire html div  firefox doesnt do a thing   My solution that worked for me was using both a scaling and a translation  and also adding the original height and weight and then setting the height and weight of the div itself    miniPreview   transform  translate -710px  -1000px  rotate 0rad  skewX 0rad  scale 0 3  0 3   transform-origin  1010px 1429px 0px  width  337px  height  476px    Obviously change these to your own needs  It gave me the same result in all browsers

User · Answer

Zoom and transform scale are not the same thing  They are applied at different times  Zoom is applied before the rendering happens  transform - after  The result of this is if you take a div with width height   100  nested inside of another div  with fixed size  if you apply zoom  everything inside your inner zoom will shrink  or grow  but if you apply transform your entire inner div will shrink  even though width height is set to 100   they are not going to be 100  after transformation

User · Answer

zoom  145   -moz-transform  scale 1 45     use this to be on the safer side

User · Answer

try this code to zoom the whole page in fireFox  -moz-transform  scale 2     if I am using this code  the whole page scaled with y and x scroll not properly zoom  so Sorry to say fireFox not working well using  -moz-transform  scale 2             Simply you can t zoom your page using css in fireFox

User · Answer

Only correct and W3C compatible answer is   lt html gt  object and rem  transformation doesn t work correctly if you scale down  for example scale 0 5     Use    html      font-size  1mm     or your favorite unit        and use in your code  rem  unit  including styles for  lt body gt   instead metric units     s without changes  For all backgrounds set background-size  Define font-size for body  that is inherited by other elements   if any condition occurs that shall fire zoom other than 1 0 change the font-size for  tag  via CSS or JS    for example    media screen and  max-width 320pt       html            font-size  0 5mm            This makes equivalent of zoom 0 5 without problems in JS with clientX and positioning during drag-drop events    Don t use  rem  in media queries    You really doesn t need zoom  but in some cases it can faster method for existing sites

User · Answer

Try this code  this   ll work   -moz-transform  scale 2     You can refer to this

User · Answer

For me this works to counter the difference between zoom and scale transform  adjust for the intended origin desired   zoom  0 5  -ms-zoom  0 5  -webkit-zoom  0 5  -moz-transform   scale 0 5 0 5   -moz-transform-origin  left center

User · Answer

For me this works well with IE10  Chrome  Firefox and Safari       MyDiv gt                zoom  50           -moz-transform  scale 0 5           -webkit-transform  scale 1 0          This zooms all content in  to 50

User · Answer

Use scale instead  After many researches and tests I have made this plugin to achieve it cross browser     fn scale   function x        if    this  filter   visible   length  amp  amp  x  1 return   this       if    this  parent   hasClass  scaleContainer               this  wrap     lt div class  scaleContainer  gt    css  position   relative               this  data                originalWidth    this  width                 originalHeight    this  height                  this  css            transform    scale   x               -ms-transform    scale   x               -moz-transform    scale   x               -webkit-transform    scale   x               transform-origin    right bottom            -ms-transform-origin    right bottom            -moz-transform-origin    right bottom            -webkit-transform-origin    right bottom            position    absolute            bottom    0            right    0               if x  1            this  unwrap   css  position   static   else               this  parent                    width   this  data  originalWidth   x                   height   this  data  originalHeight   x       return   this        usege     selector  scale 0 5     note   It will create a wrapper with a class scaleContainer  Take care of that while styling content

User · Answer

does this work correctly for you      zoom  145   -moz-transform  scale 1 45   -webkit-transform  scale 1 45   scale 1 45   transform  scale 1 45

User · Answer

It does not work in uniform way in all browsers  I went to to  http   www w3schools com html tryit asp filename tryhtml pulpitimage and added style for zoom and -moz-transform  I ran the same code on firefox  IE and chrome and got 3 different results    lt html gt   lt style gt  body zoom 3 -moz-transform  scale 3     lt  style gt   lt body gt    lt h2 gt Norwegian Mountain Trip lt  h2 gt   lt img border  0  src   images pulpit jpg  alt  Pulpit rock     gt    lt  body gt   lt  html gt

User · Answer

I would change zoom for transform in all cases because  as explained by other answers  they are not equivalent  In my case it was also necessary to apply transform-origin property to place the items where I wanted   This worked for me in Chome  Safari and Firefox   transform  scale 0 4   transform-origin  top left  -moz-transform  scale 0 4   -moz-transform-origin  top left

[css] How can I zoom an HTML element in Firefox and Opera?

Examples related to css

Examples related to firefox

Examples related to cross-browser

Examples related to zooming

Examples related to opera