ie11 css rotate - background element not clickable

Question

I'm creating a tab interface whereby the active tab has a rotate transformation which allows a preview of the next tab to be visible. Clicking on a button in the preview area will open the next tab.

This is working fine in all browsers apart from IE11. See snippet below.

$(document).ready(function() {
  $('button').click(function() {
    alert('Button was clicked');
  });
})

* {
  margin: 0;
  padding: 0
}

.container {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.container .tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 185%;
  height: 140%;
  transform: translateX(-50%) rotate(-25deg);
  transform-origin: 50% 0;
  overflow: hidden;
}

.container .tab .content {
  transform: rotate(25deg);
  transform-origin: 0 0;
  margin-left: 50%;
  position: relative;
  height: 75%;
  width: 55%;
}

.container .tab-1 {
  z-index: 2;
}

.container .tab-1 .content {
  background-color: red;
}

.container .tab-2 {
  z-index: 1;
  height: 200%;
}

.container .tab-2 .content {
  background-color: green;
}

.container .tab-2 button {
  position: absolute;
  bottom: 37%;
  right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <div class="content"></div>
  </div>

  <div class="tab tab-2">
    <div class="content">
      <button type="button">
        Click me
      </button>
    </div>
  </div>
</div>

I think the problem is that although IE visibly performs the rotation, the original bounding area itself is not rotated, thus the click doesn't get applied on the background element.

Anybody got any ideas how I can fix this? jsfiddle here: https://jsfiddle.net/bmq2e2ae/1/

Answer 1

For this to work in IE you can add pointer-events: none for .tab .content and bring back pointer-events to initial state for children of .tab .content.

Demo:

$(document).ready(function() {
  $('button').click(function() {
    alert('Button was clicked');
  });
})

* {
  margin: 0;
  padding: 0
}

.container {
  width: 400px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.container .tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 185%;
  height: 140%;
  transform: translateX(-50%) rotate(-25deg);
  transform-origin: 50% 0;
  overflow: hidden;
}

.container .tab .content {
  transform: rotate(25deg);
  transform-origin: 0 0;
  margin-left: 50%;
  position: relative;
  height: 75%;
  width: 55%;
}

.container .tab-1 {
  z-index: 2;
}

.container .tab-1 .content {
  background-color: red;
}

.container .tab-2 {
  z-index: 1;
  height: 200%;
}

.container .tab-2 .content {
  background-color: green;
}

.container .tab-2 button {
  position: absolute;
  bottom: 37%;
  right: 20px;
}

/* IE Hack: disable pointer-events */
.container .tab .content {
  pointer-events: none;
}

/* IE Hack: enable pointer-events for descendants */
.container .tab .content > * {
  pointer-events: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <div class="content"></div>
  </div>

  <div class="tab tab-2">
    <div class="content">
      <button type="button">
        Click me
      </button>
    </div>
  </div>
</div>

Also you wrap this hack in media query browser hack to be evaluated only in IE

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
  /* IE Hack: disable pointer-events */
  .container .tab .content {
    pointer-events: none;
  }

  /* IE Hack: enable pointer-events for descendants */
  .container .tab .content > * {
    pointer-events: initial;
  }
}

Answer 2

When you use CSS3 TRANSFORMS you need to use different tags for diffeent browser.

You need to use like mentioned below.

-webkit-transform: rotate(-25deg) translateX(-50%);
-webkit-transform-origin: 50% 0%;
-moz-transform: rotate(-25deg) translateX(-50%);
-moz-transform-origin: 50% 0%;
-o-transform: rotate(-25deg) translateX(-50%);
-o-transform-origin: 50% 0%;
-ms-transform: rotate(-25deg) translateX(-50%);
-ms-transform-origin: 50% 0%;
transform: rotate(-25deg) translateX(-50%);
transform-origin: 50% 0%;

This will work and supported in below mentioned browser versions.

Chrome : 4.0+

Firefox : 3.5+

Safari : 3.1+

IE : 9.0+

Opera : 10.5+

1st Example from requirement : Instead of rotating both the div you can rotate only second div and it will work. Please check below solution.

$(document).ready(function() {
    $('button').click(function() {
        alert('Button was clicked');
    });
});

* {
    margin: 0;
    padding: 0
}

.container {
    width: 400px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.container .tab {

    width: 185%;
    height: 140%;
    overflow: hidden;
}

.container .tab .content {
    position: relative;
    height: 100%;
    width: 100%;
}

.container .tab-1 {
    z-index: 2;
    width: 100%;
}

.container .tab-1 .content {
    background-color: red;
}

.container .tab-2 {
    z-index: 3;
    transform: translateX(-40%) rotate(-25deg);
    transform-origin: 50% 0;
}

.container .tab-2 .content {
    background-color: green;
}

.container .tab-2 button {
    position: absolute;
    right: 60px;
    top:20px;
    transform: translateX(50%) rotate(25deg);
    transform-origin: 50% 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="tab tab-1">
        <div class="content">

        </div>
    </div>

    <div class="tab tab-2">
        <div class="content">
            <button type="button">
                Click me
            </button>
        </div>
    </div>
</div>

2nd Example from requirement.: Within one div you can achieve this. Please check below.

$(document).ready(function() {
    $('button').click(function() {
        alert('Button was clicked');
    });
});

* {
    margin: 0;
    padding: 0
}

.container {
    position: relative;
    overflow: hidden;
}
.container .tab{
    z-index: 2;
    margin-bottom:10px;
    position: relative;
    display: block;
    width: 400px;
    height: 200px;
    background-color: red;
    overflow: hidden;
    
}

.container .content {
    z-index: 62;
    width: 200px;
    height: 120px;
    background-color: green;
    position: absolute;
    bottom: -72px;
    right: -35px;
    transform: rotate(-25deg) ;
    -webkit-transform: rotate(-25deg) ;
    -moz-transform: rotate(-25deg) ;
    -o-transform: rotate(-25deg) ;
    -ms-transform: rotate(-25deg) ;
}
.container button{
  border:1px solid #eee;
}
.container a {
  color:#FFF;
}

.container button,
.container a {
    position: absolute;
    display: block;
    margin-right: 30px;
    right: 15px;
    bottom: 80px;
    transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    cursor: pointer;
}

<!doctype html>
<html>
    <head>
        <title>IE10/11 Media Query Test</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
      <div class="container">
          <div class="tab tab-1">
          Tab With Link 
              <div class="content">
                  <a  href="https://www.google.co.in">Link</a>
              </div>
          </div>

          <div class="tab tab-2">
          Tab With Button 
              <div class="content">
                  <button id="check_btn" type="button">Click me</button>
              </div>
          </div>

          <div class="tab tab-3">
          Tab Without Link or Button
              <div class="content">
              </div>
          </div>

          <div class="tab tab-4">
              Only Tab with no Green Area
          </div>
      </div>
    </body>
</html>

This will help you. Let me know if it not works for you.

Answer 3

The parent element .tab-2 of the button has a lower z-index set then the other .tab-1. So in IE .tab-1 is covering everything, when trying to click even though not visibility.

Take the button element out of the .tab-2 .content elements and place after both inside the container. Then set position:absolute and a higher z-index then both the .container .tab-2 and .container .tab-1. The re-position.

Note: You have to scroll in example below to see button due to elements height.

JSFiddle Demo

$(document).ready(function() {
  $('button').click(function() {
    alert('Button was clicked');
  });
})

* {
  margin: 0;
  padding: 0
}

.container {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.container .tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 185%;
  height: 140%;
  transform: translateX(-50%) rotate(-25deg);
  transform-origin: 50% 0;
  overflow: hidden;
}

.container .tab .content {
  transform: rotate(25deg);
  transform-origin: 0 0;
  margin-left: 50%;
  position: relative;
  height: 75%;
  width: 55%;
}

.container .tab-1 {
  z-index: 2;
}

.container .tab-1 .content {
  background-color: red;
}

.container .tab-2 {
  z-index: 1;
  height: 200%;
}

.container .tab-2 .content {
  background-color: green;
}

.container button {
  position: absolute;
  bottom: 5%;
  right: 10px;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <div class="content">Tab 1</div>
  </div>
  <div class="tab tab-2">
    <div class="content">Tab 2</div>
  </div>
  <button type="button">Click me</button>
</div>

Answer 4

Instead of rotating the first tab, you could rotate the second one (the one with the button). It would allow to keep that second tab on top of the first one. You can see the result in this jsfiddle.

$(document).ready(function() {
    $('button').click(function(e) {
    	e.stopPropagation();
        alert('Button was clicked');
    });
    $('.tab-1').click(function() {
        alert('Tab1 was clicked');
    });
    $('.tab-2').click(function() {
        alert('Tab2 was clicked');
    });
})

* {
    margin: 0;
    padding: 0
}

.container {
    width: 400px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.container .tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.container .tab .content {
    position: relative;
    height: 100%;
    background-color: red;
}

.container .tab-2 {
    transform: translateX(63%) translateY(100%) rotate(-25deg);
    transform-origin: 0% 0%;
    overflow: hidden;
}

.container .tab-2 .content {
    background-color: green;
    transform: rotate(25deg) translateX(-63%) translateY(-100%);
    transform-origin: 0% 0%;
}

.container .tab-2 button {
    position: absolute;
    bottom: 4%;
    right: 3%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="tab tab-1">
        <div class="content">
            Tab 1
        </div>
    </div>
    <div class="tab tab-2">
        <div class="content">
            Tab 2
            <button type="button">
                Click me
            </button>
        </div>
    </div>
</div>