Quantcast
Channel: Internet Explorer Web Development forum
Viewing all articles
Browse latest Browse all 3527

IE 11 : divs positioning with zoom greater than one - Works well in Chrome

$
0
0

I have a very simple question. How do I make the divs position to work in IE when zoom is greater than one (ex: zoom: 1.467)?

I have created a simple jsFiddle. if you view the result full screen in Chrome, divs are positioned as expected. But id you see the same result in IE11, divs are randomly positioned. Please note, when zoom set to 1, it works absolutely fine in IE too.

I believe this is pure css issue with IE.

How can I make it working in IE same as Chrome?

jsFiddle Full Screen Result: https://jsfiddle.net/vinayak_nandi/fd6ch7yh/5/embedded/result/

jsFiddle for editing: https://jsfiddle.net/vinayak_nandi/fd6ch7yh/5/

I really appreciate the help.

Thanks in advance

Images:

1. When viewed the result on Chrome (each div with zoom:1.4671..):

enter image description here

2. When veiwed the result in IE 11 (each div with zoom:1.4671..):

enter image description here

HTML and CSS Snippets

<divid="app"><divclass="widget"id="img1">image div 1</div><divclass="widget"id="img2">image div 2</div><divclass="widget"id="img3">image div 3</div><divclass="widget"id="img4">image div 4</div><divclass="widget"id="img5">image div 5</div><divclass="widget"id="img6">image div 6</div><divclass="widget"id="img7">image div 7</div><divclass="widget"id="img8">image div 8</div></div> -- ** -- Styles -- ** --

#app{
    height: 1000px; 
    width: 1920px;
    overflow: hidden;
    ;
    -webkit-backface-visibility: hidden;
}
.widget {
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #C0C0C0;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-background-clip: padding-box;
  display: inline-block;
  color: white;
  text-align: center;
  border: solid 1px rgb(75, 75, 75);
  ;
  zoom: 1.467125382263;
}
#img1{
    left: 541px; 
    top: 6px; 
    width: 220px; 
    height: 237px; 
}
#img2{ 
  left: 14px;
  top: 249px;
  width: 309px;
  height: 438px;
}
#img3{
  left: 15px;
  top: 7px;
  width: 222px;
  height: 237px;
}
#img4{
  left: 242px;
  top: 7px;
  width: 294px;
  height: 237px;
}
#img5{
  left: 766px;
  top: 6px;
  width: 284px;
  height: 237px;
}
#img6{
  left: 1056px;
  top: 6px;
  width: 251px;
  height: 237px;
}
#img7{
  left: 829px;
  top: 249px;
  width: 477px;
  height: 438px;
}
#img8{
  left: 329px;
  top: 249px;
  width: 496px;
  height: 438px;
}

Viewing all articles
Browse latest Browse all 3527

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>