Slider Revolution only shows up in Internet Explorer

Question

The site I am working on has a slider revolution banner, and it only shows in IE. Does anyone have any idea why this would be occurring? Something in the CSS seems to be causing it to not show.

Here is the HTML:

<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
    <link rel="stylesheet" href="includes/plugins/revolution_slider/rs-plugin/css/settings.css">
<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->   

<!-- start: MAIN CONTAINER -->
<div class="main-container">

    <style type="text/css">
    .big {
        font-size: 28px !important;
        }
    .medium {
        font-size: 22px !important;
        }
    .small {
        font-size: 18px !important;
        }   
    .bold {
        font-weight: bold !important;
        }
    .white {
        color: white !important;
        }
    .black {
        color: black !important;
        }
    .text-align-right {
        text-align: right !important;
        }
    .text-align-center {
        text-align: center !important;
        }
    .text-light {
    font-weight: lighter;
        }   

  </style>

  <!-- start: REVOLUTION SLIDERS -->
<section class="fullwidthbanner-container">
    <div class="fullwidthabnner">
        <ul>
            <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                <img src="includes/images/sliders/free-edi/background.jpg"  style="background-color:rgb(255, 255, 255)" alt="slide background"  data-bgfit="cover" data-bgposition="center bottom" data-bgrepeat="no-repeat">
                <div class="caption lfb"
                data-x="-350"
                data-y="25"
                data-speed="2000"
                data-start="100"
                data-easing="easeOutBack">
                    <img src=".../balloons-left.png" alt="Image 1" width="200px" style="width:200px;">
                </div>
                <div class="caption lfb"
                data-x="1200"
                data-y="25"
                data-speed="2000"
                data-start="100"
                data-easing="easeOutBack">
                    <img src=".../balloons-right.png" alt="Image 1" width="200px" style="width:200px;">
                </div>
                <div class="caption lft slide_title slide_item_left big bold black text-align-center"
                data-x="0"
                data-y="70"
                data-speed="1000"
                data-start="500"
                data-easing="easeOutExpo">
                    MISC TEXT
                </div>
                <div class="caption lfT slide_desc slide_item_left medium black text-align-center"
                data-x="0"
                data-y="170"
                data-speed="1000"
                data-start="1000"
                data-easing="easeOutExpo">
                    MISC TEXT
                </div>
            </li>
        </ul>
    </div>
</section>
<!-- end: REVOLUTION SLIDERS -->

In the footer -

<script src="includes/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="includes/plugins/revolution_slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

CSS

/* ---------------------------------------------------------------------- */
/*  Slider Revolution  Elements
/* ---------------------------------------------------------------------- */
.bannercontainer {
    background-color: #fff;
    width: 921px;
    position: relative;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.banner {
    width: 921px;
    height: 280px;
    position: relative;
    overflow: hidden;
}

.bannercontainer .banner > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bannercontainer .banner > ul li {
    position: absolute
}

.bannercontainer-simple {
    padding: 0px;
    background-color: #fff;
    width: 960px;
    position: relative;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.banner-simple {
    width: 960px;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.fullwidthbanner-container {
    width: 100% !important;
    position: relative;
    padding: 0;
    overflow: hidden;
}
.fullwidthbanner-container .fullwidthabnner {
    width: 100% !important;
    max-height: 280px !important;
    position: relative;
    border-bottom: 1px solid #E7E7E7;
    overflow: hidden;
    background: rgb(246, 246, 246);
}
.fullwidthbanner-container .fullwidthabnner > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fullwidthbanner-container .fullwidthabnner > ul li {
    position: absolute;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {

    .banner, .bannercontainer {
        width: 760px;
        height: 396px;
    }

}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .banner, .bannercontainer {
        width: 480px;
        height: 250px;
    }

}

@media only screen and (min-width: 0px) and (max-width: 479px) {
    .banner, .bannercontainer {
        width: 320px;
        height: 167px;
    }

}
/*Revolution*/
.slide_title {
    color: #555555;
    font-family: 'Open Sans';
    font-size: 45px;
    font-weight: 300;
    text-transform: uppercase;
}
.slide_subtitle {
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: 400;
    padding: 5px;
    text-transform: uppercase;
}
.slide_list_item {
    background-color: #0088CC;
    color: #FAFAFA;
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 400;
    padding: 5px;
    text-transform: uppercase;
}
.slide_desc {
    color: #7B8793;
    font-size: 14px;
    line-height: 24px;
}
.slide_desc_bordered {
    border-left: 3px solid #DDDDDD !important;
    padding-left: 5px;
}

Answer 1

It ended up being an issue with jquery.min.js v2.1.3

return window.getComputedStyle was triggering an error in Firefox.

Adding conditions if(elem.nodeType === elem.ELEMENT_NODE) fixed the issue.