Internet Explorer css issue problems with the slider

Question

I am using the Lumi theme I purchased from sooperthemes (they seem like they are no longer in business) for Drupal. It works great except for in Internet Explorer (all versions I have which is 10, 11 and 8).

Basically, the first slide is partially visible off to the right. And the rest of the slides are not visible.

I've searched and tried all the suggested fixes, but nothing has worked. To best of my knowledge, the problem seems to be in the style.css. I've included the section I think is relevant below. Any tip or ideas?

/**
 * Featured
 */
.wrap-featured {
  width: 100%;
  overflow: hidden;
  margin-top: -12px;
}

.region-featured {
  position: relative;
}
.region-featured .block {
  padding-top: 0;
  padding-bottom: 0;
}
.region-featured:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .region-featured {
  height: 1%;
}
*:first-child + html .region-featured {
  min-height: 1%;
}
.region-featured h1 {
  font-size: 72px;
  line-height: 1.4em;
  text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
}
.region-featured p {
  font-size: 24px;
  line-height: 1.4em;
  text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
}
@media screen and (max-width:768px) {
  .region-featured h1 {
    font-size: 48px;
    line-height: 1.4em;
  }
  .region-featured p {
    font-size: 18px;
    line-height: 1.4em;
  }
}
.region-featured .flex-viewport {
   overflow: visible!important;
   }
.region-featured .slides {
  height: 263px;
  list-style: none;
  list-style-type: none;
  margin-top: 0;
  margin-bottom: 0;
}
.region-featured .slides h1, .region-featured .slides h2, .region-featured .slides h3, .region-featured .slides h4, .region-featured .slides h5, .region-featured .slides h6,
.region-featured .slides p, .region-featured .slides ul, .region-featured .slides ol, .region-featured .slides blockquote {
  margin: 15px 0;
}
.region-featured .slides img {
  margin: 30px 0 0 0;
}
.region-featured .slides h1, .region-featured .slides h2 {
  margin: 30px 0 15px 0;
}
.region-featured .slides *[class|="col"] {
  margin-bottom: 0;
}
.region-featured .slides > li {
  -moz-transition-property: opacity;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 300ms;
  -webkit-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.region-featured .slides > li.flex-active-slide {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.flex-control-nav {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
}
.flex-control-nav li {
  display: inline;
}
.flex-control-nav li a {
  display: inline-block;
  text-indent: -999999px;
  overflow: hidden;
  width: 18px;
  height: 18px;
  background: url("../images/slider-nav.png") no-repeat center center;
  cursor: pointer;
}
.flex-control-nav li a.flex-active {
  background-image: url("../images/slider-nav-active.png");
}
@media screen and (max-width:640px) {
  .flex-control-nav {
    display: none;
  }
}

/**

Answer 1

There is no easy fix for your problem. If you look into what's happening in the DOM (rightclick, Inspect Element, find the ul class="slides" element) you'll see in Chrome that it's applying the following inline styles:

-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform: translate3d(-1050px, 0, 0);

During animation, multiples of -1050px are replaced into the X parameter to cause the actual scrolling, gradually because of the transition definition. In IE10 and 11 nothing happens, just the slides switching statically, causing them to rendered at the right hand side after the 'spacer page', because its equivalent CSS rules are not being applied at all. If you manually add:

transition:0.6s;
transform:translateX(-1050px);

without prefixes in IE dev tools you'll see it working fine as intended.

The real problem here is that your slider was written in 2012 according to the copyright notice, and most probably quite a bit before that when IE9 and before didn't support any transitions at all, hence forcing the developer to recreate the effect with Javascript-based CSS animations which for unknown reason stopped working in IE10 and later, most probably bad coding in general, or relying on conditional comments while on the other hand disabling the regular code for any version of IE, causing neither to be executed.

To really fix this, you'd have to modify the code to generate the same transition and transform (unprefixed) rules as it does for Webkit (and probably -moz) - IE supports them all since IE10 and arguably even better than its competitors. I cannot help you with this beyond pointing out the issue since I see the code is partially compressed, making it nearly impossible to understand the code and apply directed changes. If you have access to the uncompressed source codes you should hire a professional JS developer to patch it, but a better bet is to track down the original author and ask him to fix it. Otherwise I'm afraid you're rather out of luck here.

The only other way to fix it is by applying a meta tag forcing IE to render in IE9 compatibility mode, which should work fine actually. However, this is a timebombed solution by definition - it's unlikely that Microsoft will keep shipping all its outdated render engines still when IE20 arrives, or sooner if you're unlucky. The required tag is:

<meta http-equiv="X-UA-Compatible" content="IE=9">

Add it to your header and the scroller should work fine... for now.

tl&dr: you bought a buggy outdated theme. Get the author to fix it. IE is working exactly as it's being told to by the code you have purchased which was made unmaintainable by its author. You can make it work for now with the workaround above, but nobody knows how long it will keep working - could be 2 years, could be 20.