javascript - ie11 css rotate - background element not clickable

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=".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'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./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/bmq2e2ae/1/

Share Improve this question edited Aug 5, 2017 at 13:45 Vadim Ovchinnikov 14k7 gold badges65 silver badges94 bronze badges asked Jul 30, 2017 at 23:07 MAX POWER 5,45816 gold badges98 silver badges146 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 7 +250

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./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;
  }
}

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./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>

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./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>

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./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./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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - ie11 css rotate - background element not clickable - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)