title: Image Slider works fine in Chrome but not in IE11
body: <p>Here is a link to my code <a href="http://jsfiddle.net/wf32jbhx/" rel="nofollow">http://jsfiddle.net/wf32jbhx/</a></p>
  
  <p>I have tried hosting the images on my sharepoint site as well and the images just stack on top of one another and don't format properly. IT works fine in Chrome on my sharePoint site however.</p>
  
  <p>When I open the .html file up from my local storage on my computer, it displays fine in an IE11 tab. The issue occurs when I try to open it up in IE11 with the file coming from my SharePoint site location. Does anyone know what is causing this issue.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="slideshow-wrap"&gt;
      &lt;input type="radio" id="button-1" name="controls" checked="checked"/&gt;
      &lt;label for="button-1"&gt;&lt;/label&gt;
      &lt;input type="radio" id="button-2" name="controls"/&gt;
      &lt;label for="button-2"&gt;&lt;/label&gt;
      &lt;input type="radio" id="button-3" name="controls"/&gt;
      &lt;label for="button-3"&gt;&lt;/label&gt;
      &lt;input type="radio" id="button-4" name="controls"/&gt;
      &lt;label for="button-4"&gt;&lt;/label&gt;
      &lt;input type="radio" id="button-5" name="controls"/&gt;
      &lt;label for="button-5"&gt;&lt;/label&gt;
      &lt;label for="button-1" class="arrows" id="arrow-1"&gt;&gt;&lt;/label&gt;
      &lt;label for="button-2" class="arrows" id="arrow-2"&gt;&gt;&lt;/label&gt;
      &lt;label for="button-3" class="arrows" id="arrow-3"&gt;&gt;&lt;/label&gt;
      &lt;label for="button-4" class="arrows" id="arrow-4"&gt;&gt;&lt;/label&gt;
      &lt;label for="button-5" class="arrows" id="arrow-5"&gt;&gt;&lt;/label&gt;
      &lt;div id="slideshow-inner"&gt;
          &lt;ul&gt;
              &lt;li id="slide1"&gt;
                  &lt;img src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" /&gt;
                  &lt;div class="description"&gt;
                      &lt;input type="checkbox" id="show-description-1"/&gt;
                      &lt;label for="show-description-1" class="show-description-label"&gt;I&lt;/label&gt;
                      &lt;div class="description-text"&gt;
                          &lt;h2&gt;Flower power&lt;/h2&gt;
                          &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li id="slide2"&gt;
                  &lt;img src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" /&gt;
                  &lt;div class="description"&gt;
                      &lt;input type="checkbox" id="show-description-2"/&gt;
                      &lt;label for="show-description-2" class="show-description-label"&gt;I&lt;/label&gt;
                      &lt;div class="description-text"&gt;
                          &lt;h2&gt;Golden sunset&lt;/h2&gt;
                          &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li id="slide3"&gt;
                  &lt;img src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" /&gt;
                  &lt;div class="description"&gt;
                      &lt;input type="checkbox" id="show-description-3"/&gt;
                      &lt;label for="show-description-3" class="show-description-label"&gt;I&lt;/label&gt;
                      &lt;div class="description-text"&gt;
                          &lt;h2&gt;Flower power again&lt;/h2&gt;
                          &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li id="slide4"&gt;
                  &lt;img src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" /&gt;
                  &lt;div class="description"&gt;
                      &lt;input type="checkbox" id="show-description-4"/&gt;
                      &lt;label for="show-description-4" class="show-description-label"&gt;I&lt;/label&gt;
                      &lt;div class="description-text"&gt;
                          &lt;h2&gt;Stormy coast&lt;/h2&gt;
                          &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li id="slide5"&gt;
                  &lt;img src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" /&gt;
                  &lt;div class="description"&gt;
                      &lt;input type="checkbox" id="show-description-5"/&gt;
                      &lt;label for="show-description-5" class="show-description-label"&gt;I&lt;/label&gt;
                      &lt;div class="description-text"&gt;
                          &lt;h2&gt;Splash!&lt;/h2&gt;
                          &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@font-face {
      font-family: Arial;
  }
  
  * {
      margin: 0;
      padding: 0;
  }
  
  body {
      background-image: url(https://team.amer.mymetlife.com/teams/Corpsystems/Site%20images/Slideshow%20Folder/F1_light_blue_flag.svg.png);
      background-repeat: repeat;
      height: 500px;
      padding: 1px;
  }
  
  h1 { color: white }
  
  #slideshow-wrap {
      display: block;
      height: 320px;
      min-width: 260px;
      max-width: 640px;
      margin: auto;
      border: 12px rgba(255,255,240,1) solid;
      -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
      -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
      box-shadow: 0px 0px 5px rgba(0,0,0,.8);
      margin-top: 20px;
      position: relative;
  }
  
  #slideshow-inner {
      width: 100%;
      height: 100%;
      background-color: rgb(0,0,0);
      overflow: hidden;
      position: relative;
  }
  
  #slideshow-inner&gt;ul {
      list-style: none;
      height: 100%;
      width: 500%;
      overflow: hidden;
      position: relative;
      left: 0px;
      -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
      -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
      transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  }
  
  #slideshow-inner&gt;ul&gt;li {
      width: 20%;
      height: 320px;
      float: left;
      position: relative;
  }
  
  #slideshow-inner&gt;ul&gt;li&gt;img {
      margin: auto;
      height: 100%;
  }
  
  #slideshow-wrap input[type=radio] {
      position: absolute;
      left: 50%;
      bottom: 15px;
      z-index: 100;
      visibility: hidden;
  }
  
  #slideshow-wrap label:not(.arrows):not(.show-description-label) {
      position: absolute;
      left: 50%;
      bottom: -45px;
      z-index: 100;
      width: 12px;
      height: 12px;
      background-color: rgba(200,200,200,1);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      cursor: pointer;
      -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
      -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
      box-shadow: 0px 0px 3px rgba(0,0,0,.8);
      -webkit-transition: background-color .2s;
      -moz-transition: background-color .2s;
      -o-transition: background-color .2s;
      transition: background-color .2s;
  }
  
  #slideshow-wrap label:not(.arrows):active { bottom: -46px }
  
  #slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(0,0,0,1) }
  
  #slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(0,0,0,1) }
  
  #slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(0,0,0,1) }
  
  #slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(0,0,0,1) }
  
  #slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(0,0,0,1) }
  
  #slideshow-wrap label[for=button-1] { margin-left: -36px }
  
  #slideshow-wrap label[for=button-2] { margin-left: -18px }
  
  #slideshow-wrap label[for=button-4] { margin-left: 18px }
  
  #slideshow-wrap label[for=button-5] { margin-left: 36px }
  
  #slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner&gt;ul { left: 0 }
  
  #slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner&gt;ul { left: -100% }
  
  #slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner&gt;ul { left: -200% }
  
  #slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner&gt;ul { left: -300% }
  
  #slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner&gt;ul { left: -400% }
  
  label.arrows {
      font-family: Arial;
      font-size: 25px;
      color: rgb(255,255,240);
      position: absolute;
      top: 50%;
      margin-top: -25px;
      display: none;
      opacity: 0.7;
      cursor: pointer;
      z-index: 1000;
      background-color: transparent;
      -webkit-transition: opacity .2s;
      -moz-transition: opacity .2s;
      -o-transition: opacity .2s;
      transition: opacity .2s;
      text-shadow: 0px 0px 3px rgba(0,0,0,.8);
  }
  
  label.arrows:hover { opacity: 1 }
  
  label.arrows:active { margin-top: -23px }
  
  input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 {
      right: -55px;
      display: block;
  }
  
  input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 {
      left: -55px;
      display: block;
      -webkit-transform: scaleX(-1);
      -moz-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      transform: scaleX(-1);
  }
  
  input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }
  
  input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }
  
  input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }
  
  .description {
      position: absolute;
      top: 0;
      left: 0;
      width: 260px;
      font-family: Arial;
      z-index: 1000;
  }
  
  .description input { visibility: hidden }
  
  .description label {
      font-family: Arial;
      background-color: rgba(255,255,240,1);
      position: relative;
      left: -17px;
      top: 00px;
      width: 40px;
      height: 27px;
      display: inline-block;
      text-align: center;
      padding-top: 7px;
      border-bottom-right-radius: 15px;
      cursor: pointer;
      opacity: 0;
      -webkit-transition: opacity .2s;
      -moz-transition: opacity .2s;
      -o-transition: opacity .2s;
      transition: opacity .2s;
      z-index: 5;
      color: rgb(20,20,20);
  }
  
  #slideshow-inner&gt;ul&gt;li:hover .description label { opacity: 1 }
  
  .description input[type=checkbox]:checked~label { opacity: 1 }
  
  .description .description-text {
      background-color: rgba(255,255,230,.5);
      padding-left: 45px;
      padding-top: 25px;
      padding-right: 15px;
      padding-bottom: 15px;
      position: relative;
      top: -35px;
      z-index: 4;
      opacity: 0;
      -webkit-transition: opacity .2s;
      -moz-transition: opacity .2s;
      -o-transition: opacity .2s;
      transition: opacity .2s;
      color: rgb(20,20,20);
  }
  
  .description input[type=checkbox]:checked~.description-text { opacity: 1 }
  </code></pre>