Image Slider works fine in Chrome but not in IE11

Question

Here is a link to my code http://jsfiddle.net/wf32jbhx/

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.

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.

HTML

<div id="slideshow-wrap">
    <input type="radio" id="button-1" name="controls" checked="checked"/>
    <label for="button-1"></label>
    <input type="radio" id="button-2" name="controls"/>
    <label for="button-2"></label>
    <input type="radio" id="button-3" name="controls"/>
    <label for="button-3"></label>
    <input type="radio" id="button-4" name="controls"/>
    <label for="button-4"></label>
    <input type="radio" id="button-5" name="controls"/>
    <label for="button-5"></label>
    <label for="button-1" class="arrows" id="arrow-1">></label>
    <label for="button-2" class="arrows" id="arrow-2">></label>
    <label for="button-3" class="arrows" id="arrow-3">></label>
    <label for="button-4" class="arrows" id="arrow-4">></label>
    <label for="button-5" class="arrows" id="arrow-5">></label>
    <div id="slideshow-inner">
        <ul>
            <li id="slide1">
                <img src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" />
                <div class="description">
                    <input type="checkbox" id="show-description-1"/>
                    <label for="show-description-1" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>Flower power</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li id="slide2">
                <img src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" />
                <div class="description">
                    <input type="checkbox" id="show-description-2"/>
                    <label for="show-description-2" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>Golden sunset</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li id="slide3">
                <img src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
                <div class="description">
                    <input type="checkbox" id="show-description-3"/>
                    <label for="show-description-3" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>Flower power again</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li id="slide4">
                <img src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" />
                <div class="description">
                    <input type="checkbox" id="show-description-4"/>
                    <label for="show-description-4" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>Stormy coast</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
            <li id="slide5">
                <img src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" />
                <div class="description">
                    <input type="checkbox" id="show-description-5"/>
                    <label for="show-description-5" class="show-description-label">I</label>
                    <div class="description-text">
                        <h2>Splash!</h2>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

@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>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>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
}

#slideshow-inner>ul>li>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>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>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>ul>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 }

Answer 1

What's the problem?

SharePoint 2010 and 2007 force Internet Explorer to run in compatibility mode in order to get all the correct browser objects to work smoothly (which gives you functionality like viewing a list in datasheet view, or launching a file in Excel instead of downloading it).

Unfortunately, compatibility view is roughly equivalent to Internet Explorer 8 in terms of what HTML and CSS standards are followed.

If you pop open the F12 developer tools and switch your document emulation mode to 8 instead of Edge, I think you'll find that advanced CSS selectors such as #slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul and the @font-face rule simply don't work.

Here's a CSS3 reference that shows which browser versions support which CSS3 properties. http://www.w3schools.com/cssref/css3_browsersupport.asp

Also check out the CSS selectors reference here, and be aware that IE8 does not support most of the selectors that are tagged as CSS3 (only CSS1 and CSS2): http://www.w3.org/TR/selectors/#selectors

How can you fix it?

You can either get your code to work with older versions of Internet Explorer, or you can update the masterpage(s) used by your SharePoint sites with a meta tag forcing the browser into Edge mode instead of 8.

Note that if you force the browser into Edge mode, while you'll gain the benefits of modern HTML and CSS, you'll lose the benefits of the IE8-specific ActiveX controls, so be aware of how users are interacting with your SharePoint environment before doing anything sweeping.

It is possible to use multiple different masterpages throughout SharePoint, so you could theoretically whip up a custom masterpage just for those cases where you want to use modern HTML/CSS/JavaScript, and still use the IE8-mode-forcing masterpage for pages where users are directly interacting with SharePoint lists and libraries.