Menu
CSS transition property is not working as expected in IE and Edge browsers. Here I have applied transition for span element, which is working properly in other browsers except for IE and Edge. Also tried -ms-transition property. Here are my code snippets. The switch-handle element transition not working in IE and Edge.
function handlers() {
var warpper = document.getElementsByClassName("switch-wrapper"),
child = warpper[0].children;
if (!child[1].classList.contains('active')) {
child[0].checked = true;
child[1].classList.add('active');
child[2].classList.add('active');
} else {
child[0].checked = false;
child[1].classList.remove('active');
child[2].classList.remove('active');
}
}input[type=checkbox] {
width: 1px;
height: 1px;
opacity: 0;
position: absolute;
}
/*------------Wrapper CSS---------------*/
.switch-wrapper {
position: relative;
width: 70px;
cursor: pointer;
height: 22px;
}
/*------------Inner CSS---------------*/
.switch-inner {
height: 22px;
position: absolute;
transition: 0.6s;
border: 1px solid;
width: 70px;
overflow: hidden;
box-sizing: border-box;
}
/*------------ SwitchBar CSS---------------*/
.switch-on,
.switch-off {
position: absolute;
height: 20px;
width: 100%;
user-select: none;
transition: 0.6s;
line-height: 21px;
}
.switch-on {
left: -100%;
text-indent: 14px;
}
.switch-off {
text-indent: 30px;
left: 0;
}
/*------------ Handle CSS---------------*/
.switch-handle {
position: absolute;
height: 14px;
width: 14px;
margin: 3px;
background-color: #1b191e;
top: 1px;
left: 1px;
transition: 0.6s;
}
/*------------ Active CSS---------------*/
.switch-inner.active .switch-on {
background-color: aquamarine;
left: 0;
}
.switch-inner.active .switch-off {
left: 100%;
transition: 0.6s;
}
.switch-handle.active {
left: calc(100% - 21px);
transition: 0.6s;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
</head>
<body>
<h2>Switch</h2>
<div class="switch-wrapper">
<input type="checkbox" id="checked" />
<span class="switch-inner" onclick="handlers()">
<span class="switch-on">On</span>
<span class="switch-off">Off</span>
</span>
<span class="switch-handle" onclick="handlers()"></span>
</div>
</body>
</html>
665
This works in IE11 and Edge.
Only thing I noticed is in IE .switch-handle transition is not working. It is due to IE issues with calc and transition combination. Change calc() and it will work
Change
left: calc(100% - 21px);
to
left: 47px;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
