I've got a list of elements with a jQuery click listener that simply adds a class to the clicked <li> element.
This unordered list is nested in a few <div> elements which are placed and transformed with transform: matrix3d(...) attributes. The lists overflow should be hidden.
This works perfectly fine in Chrome, but IE11 (11.0.x) has some problems. Clicking a <li> element causes a fired event at a totally different <li> element.
For some reasons I have to make use of this matrix transforms and I also need these overflows. But perhaps you are aware of a neat workaround or just can state that this is a common bug in IE and not solvable.
This is the MWE:
$('li').on('click', function(e) {
if ($(this).hasClass('selected-li')) {
$(this).removeClass('selected-li');
} else {
$(this).addClass('selected-li');
}
});.myContainer {
position: absolute;
}
.overflow-hidden {
overflow: hidden;
}
.clientList {
height: 333px;
overflow-y: auto;
}
.selected-li {
background-color: #ececec;
color: #008CD6;
}
body {
background-color: #888888;
}
#d-01 {
background-color: #565656;
}
#d-01 {
background-color: #f8f8f8;
}
#d-02 {
background-color: #eeeeee;
}
#d-03 {
background-color: #e8e8e8;
}
#d-04 {
background-color: #dddddd;
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<div id="d-01" class="myContainer" style="width: 1878.12px; height: 993.96px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 54, 99, 1, 1);">
<div id="d-02" class="myContainer overflow-hidden" style="width: 100%; height: 100%; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1);">
<div id="d-03" class="myContainer" style="width: 55%; height: 70%; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 422.577, 149.094, 1, 1);">
<ul id="d-04" class="clientList">
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
<li>TEST_X</li>
</ul>
</div>
</div>
</div>
</body>
</html>Thank you so far.