IE11 opacity transition for table rows not working
In the above example, a button click adds and removes the selected Row class for a div and two table rows. The opacity should smoothly change from 1.0 to 0.25 due to the transition declaration for the general class of these elements.
This works in Chrome 43.0.2357.130 (64 bit), but not IE 11.0.9600 - only the DIV element changes. Remove the transition declaration and change transparency securely.
Am I missing some CSS subtlety or is this a bug?
+3
source to share
1 answer
I couldn't tell you why this doesn't work as expected in IE, but I'm not impressed. I noticed that the ones that don't work in IE are TR
with a class .toggleTarget
, so if you add text to divs it works correctly.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="toggleTarget">DIV CONTENT</div>
<table>
<tr>
<td>
<div class="toggleTarget">TABLE ROW 0</div>
</td>
</tr>
<tr><td>
<div class="toggleTarget">TABLE ROW 1</div>
</td></tr>
</table>
<button onclick="$('.toggleTarget').toggleClass('selectedRow');">Click Me</button>
</body>
</html>
+1
source to share