How to properly apply a CSS hack for IE11+

Question

I am creating a loading spinner for my web application. It is working perfectly fine in chrome but in IE11 the CSS styles are not working.

Below is the sample code for loading spinner that i am using from https://codepen.io/creotip/pen/dfaIh?editors=1100#0:

* {
  padding: 0px;
  margin: 0px;
}

body {
  overflow: hidden;
}

.page-bg {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: url('https://i.imgur.com/BlihuYt.jpg') center;
  -webkit-filter: blur(0px);
  z-index: 10;
}

.preloader {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8));
  z-index: 10;
}

.preloader>.preloader-box {
  position: absolute;
  width: 345px;
  height: 30px;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -150px;
  -webkit-perspective: 200px;
}

.preloader .preloader-box>div {
  position: relative;
  width: 30px;
  height: 30px;
  background: #CCC;
  float: left;
  text-align: center;
  line-height: 30px;
  font-family: Verdana;
  font-size: 20px;
  color: #FFF;
}

.preloader .preloader-box>div:nth-child(1) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 0ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(2) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 75ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(3) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 150ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(4) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 225ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(5) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 300ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(6) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 375ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(7) {
  background: #3366FF;
  margin-right: 15px;
  -webkit-animation: movement 600ms ease 450ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(8) {
  background: #3366FF;
  -webkit-animation: movement 600ms ease 525ms infinite alternate;
}

@-webkit-keyframes movement {
  from {
    -webkit-transform: scale(1.0) translateY(0px) rotateX(0deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    -webkit-transform: scale(1.5) translateY(-25px) rotateX(45deg);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.4);
    background: #3399FF;
  }
}

<div class="page-bg"></div>

<div class="preloader">
  <div class="preloader-box">
    <div>L</div>
    <div>O</div>
    <div>A</div>
    <div>D</div>
    <div>I</div>
    <div>N</div>
    <div>G</div>
  </div>
</div>

How can I resolve this problem and fix this for IE11?

Please add your code to question, links can be broken. – Mr Mush Jul 07 '17 at 15:50 — Mr Mush, Jul 07 '17 at 15:50

I haz kode · Accepted Answer · 2017-07-07T12:07:54.110

Your code had vendor prefixes

The prefix -webkit limits the property to browsers powered by the webkit engine

I removed the prefixes from your code and this is working for me on IE 11

* {
  padding: 0px;
  margin: 0px;
}

body {
  overflow: hidden;
}

.page-bg {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: url('https://i.imgur.com/BlihuYt.jpg') center;
  -webkit-filter: blur(0px);
  z-index: 10;
}

.preloader {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: radial-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8));
  z-index: 10;
}

.preloader>.preloader-box {
  position: absolute;
  width: 345px;
  height: 30px;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -150px;
  perspective: 200px;
}

.preloader .preloader-box>div {
  position: relative;
  width: 30px;
  height: 30px;
  background: #CCC;
  float: left;
  text-align: center;
  line-height: 30px;
  font-family: Verdana;
  font-size: 20px;
  color: #FFF;
}

.preloader .preloader-box>div:nth-child(1) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 0ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(2) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 75ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(3) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 150ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(4) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 225ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(5) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 300ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(6) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 375ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(7) {
  background: #3366FF;
  margin-right: 15px;
  animation: movement 600ms ease 450ms infinite alternate;
}

.preloader .preloader-box>div:nth-child(8) {
  background: #3366FF;
  animation: movement 600ms ease 525ms infinite alternate;
}

@keyframes movement {
  from {
    transform: scale(1.0) translateY(0px) rotateX(0deg);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    transform: scale(1.5) translateY(-25px) rotateX(45deg);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.4);
    background: #3399FF;
  }
}

<div class="page-bg"></div>

<div class="preloader">
  <div class="preloader-box">
    <div>L</div>
    <div>O</div>
    <div>A</div>
    <div>D</div>
    <div>I</div>
    <div>N</div>
    <div>G</div>
  </div>
</div>

@BiswaranjanPradhan Yes. I tested **Chrome 59** / **FF 54** / **IE 11** and they all work. — I haz kode, Jul 07 '17 at 12:50

How to properly apply a CSS hack for IE11+

1 Answers1