ie10, ie11 issue with skewX (double use causes rendering issues)

Question

ORIGINAL QUESTION

I can't seem to figure these bugs out (I've gone through the normal bug checking processes - validation, console debugging, etc..).

Somehow, the site is working properly on most recent browsers (latest 3 versions on both windows and mac of safari, chrome, firefox, opera) and it works on ie9, but ie10 and ie11 have some major bugs (my testing is happening on browserstack).

Site in questions on test server: http://flourishcle.com/globalmba/

ie10//ie11 issues:

• The .content within each #semester disappears - I see it on slide-in and then it vanishes
• min-width on the imgs within .content has unwanted results (even with height: auto applied)
• Overflow: hidden is not being respected (in associated with the skewed pseudo elements) - the overlapping content blocks clicking of underlying content

My first thought was an issue with the display: table I use to create the structure of the site, but that shouldn't be affecting visuals or creating squished images.

---

EDIT // UPDATE

So, I've narrowed the problem to a specific issue with SkewX and ie10/ie11.

Basic HTML:

<section class="section-1 angled">
  <div class="wrapper">
    //Content
  </div>
</section>
//Structure repeated multiple times

Basic CSS (Using Compass to import vendor specifics):

.angled {
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.wrapper {
  -moz-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
}

If I disable either one of the skewX styles everything works as expected (except it looks skewed in a bad way).

When both are enabled, however, there are text issues: the text, divs, etc. just stop being visible. If you open up dev tools and select the div sometimes the content will show up. If you select the area where the text should be sometimes it will show up. But generally the content just doesn't show up. I haven't seen this as a reported bug. I know there are workarounds for targeting ie > 9 (since conditional comments aren't supported, but hoping to find a solution).

*Skew problems don't seem to affect ie9

Answer 1

Don't know if you are still looking for a solution, but i found a "fix" for ie10 and ie11.

Replace the child div style by :

.wrapper {
  -moz-transform: skewX(20.01deg);
  -ms-transform: skewX(20.01deg);
  -webkit-transform: skewX(20.01deg);
  transform: skewX(20.01deg);
}

Looks like ie have issue rendering the double skew when values are the same. (Didn't dig it up to see why, yet) I tried changing them, and having two different values seems to do the trick.

The + .01deg allows you to keep a skew almost identical (if not identical) to the 20deg skew from before.

Answer 2

@jack answer is correct!

Relying on that IE do not consume inverted angles of same value, you can add -360 degrees to your skew value and apply to the inner element.

.angled {
    -moz-transform: skewX(-380deg);
    -ms-transform: skewX(-380deg);
    -webkit-transform: skewX(-380deg);
    transform: skewX(-380deg);
}

.wrapper {
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
}