Ie11 css rotate - фоновый элемент не доступен для кликов

Я создаю интерфейс табуляции, в котором активная вкладка имеет поворотное преобразование, которое позволяет просматривать следующую вкладку. Нажатие на кнопку в области предварительного просмотра откроет следующую вкладку.

Это отлично работает во всех браузерах, кроме IE11. См. Фрагмент ниже.

$(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>

ОТВЕТЫ

Ответ 1

Для этого в IE вы можете добавить pointer-events: none для .tab .content и вернуть pointer-events в исходное состояние для детей .tab .content.

Демо:

$(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>

Ответ 2

Когда вы используете CSS3 TRANSFORMS, вам нужно использовать разные теги для разного браузера.

Вам нужно использовать, как указано ниже.

-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%;

Это будет работать и поддерживаться в ниже упомянутых версиях браузера.

Chrome: 4.0+

Firefox: 3.5+

Safari: 3.1+

IE: 9.0+

Opera: 10.5 +

1-й пример из требования: вместо вращения обоих div вы можете вращать только второй div, и он будет работать. Пожалуйста, проверьте ниже решение.

$(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>

Ответ 3

Родительский элемент .tab-2 кнопки имеет более низкий z-index, затем другой .tab-1. Таким образом, в IE .tab-1 распространяется все, при попытке щелкнуть, хотя и не видимость.

Возьмите элемент button из элементов .tab-2 .content и разместите его как внутри контейнера. Затем установите position:absolute и более высокий z-index, а затем .container .tab-2 и .container .tab-1. Перестановка.

Примечание. Вам нужно прокрутить в примере ниже, чтобы увидеть кнопку из-за высоты элементов.

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>

Ответ 4

Вместо того, чтобы вращать первую вкладку, вы можете повернуть вторую (одну с кнопкой). Это позволит сохранить эту вторую вкладку поверх первой. Вы можете увидеть результат в этот 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>