Css3 webkit transition doesnt work - html

Question

Can someone help me animating a div? I am currently working on a web with a div that slides from left side of the window. It is working on chrome and mozilla desktop but i cant make it to work on android system webview. EDIT: i also found that a div that is fix-positioned is still moving when i scroll the screen.
I tried using #keyframe for animations but it doesnt work anyway.
I tested it on my xiao mi redmi note pro 3.
Here is the html, css and js code. Any help is greatly appreciated.
window.onload=init;
function init(){
//localStorage.clear();
addEventListener("scroll",detectScroll);
}
function detectScroll(){
var maxScroll=document.body.scrollHeight-innerHeight;
var percent=pageYOffset/maxScroll*100;
console.log(localStorage.getItem("timer"),new Date().getTime());
if(percent>50 && new Date().getTime()>localStorage.getItem("timer")){
//debugger;
var slider=document.getElementsByClassName('box')[0];
slider.classList.add("slideOut");
}
}
function minimize(){
var slider=document.getElementsByClassName('box')[0];
slider.classList.remove("slideOut");
slider.classList.add("slideIn");
localStorage.setItem("timer",new Date().getTime()+1000);
// localStorage.setItem("timer",setTimeout(function(){
// localStorage.setItem("reopen",1);
// localStorage.setItem("sliderClosed", "open");
// console.log("timeout "+localStorage.getItem("reopen"));
// },10000));
}
/*#keyframes slideOut {
from {transform:translateX(-110%);}
to {transform:translateX(0%);}
}
#keyframes slideIn {
from {transform:translateX(0%);}
to {transform:translateX(-110%);}
}
#-webkit-keyframes slideOut {
from {-webkit-transform:translateX(-110%);}
to {-webkit-transform:translateX(0%);}
}
#-webkit-keyframes slideIn {
from {-webkit-transform:translateX(0%);}
to {-webkit-transform:translateX(-110%);}
}*/
* {
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img{
max-width:100%;
height:auto;
}
.body{
margin-left:0px;
margin-right:0px;
margin-top:56px;
font-family: arial;
padding:15px;
}
#container{
margin-left:auto;
margin-right:auto;
width:480px;
font-family: arial;
}
#media only screen and (min-width: 480px) {
.box{
width:480px;
}
}
.col-xs-12{
width:100%;
padding:15px;
}
#media all and (min-width: 768px) {
#container{
width:750px;
}
.box{
width:450px;
}
.col-sm-9{
width:75%;
padding:15px;
}
.col-sm-6{
width:50%;
padding:15px;
}
.col-sm-3{
width:25%;
padding:15px;
}
}
#media screen and (-webkit-min-device-pixel-ratio: 3.0) and (min-width: 992px) {
#container{
width:970px;
}
.box{
width:450px;
}
.col-md-9{
width:75%;
padding:15px;
}
.col-md-6{
width:50%;
padding:15px;
}
.col-md-3{
width:25%;
padding:15px;
}
}
#navbarButton{
background-color: #E26A50;
border-radius: 4px;
border:none;
color:white;
padding:7px 25px;
}
#readMore{
background-color: #f5f5f5;
border-radius: 4px;
border:1px solid;
padding:10px 25px;
}
#emailText{
border: 1px solid #c7c7c7;
border-radius: 4px;
height: 28px;
}
.row{
width:100%;
display: flex;
flex-wrap: wrap;
/*flex-flow: row wrap;*/
justify-content:center;
}
.emailForm{
padding-left: 5px;
padding-right: 5px;
margin-bottom:0;
margin-top:0;
}
.navbar{
background-color: #e4e4e4;
padding:5px;
width:100%;
position: fixed;
left: 0;
top: 0;
display: flex;
flex-wrap: wrap;
justify-content:center;
}
#readMore{
background-color: #f5f5f5;
border-radius: 4px;
border: 1px solid #c7c7c7;
padding: 10px 25px;
}
.box{
display:flex;
justify-content:center;
background-color: #e4e4e4;
position: fixed;
border:none;
box-shadow:2px -1px 3px #888888;
border-radius:3px;
padding:15px;
left:-120%;
bottom:0;
height:auto;
max-width:100%;
}
#boxTextEmail{
width:100%;
height:30px;
padding:5px;
border-radius:3px;
border:1px solid #c7c7c7;
}
.box #boxForm{
margin-bottom:0px;
}
.box #boxButtonEmail{
background-color: #0F52BA;
color:white;
width:100%;
height:45px;
padding:5px;
border-radius:3px;
border:none;
}
.slideOut{
left:0%;
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
.slideIn{
left:-110%;
-webkit-transition: 1s;
-moz-transition:1s;
transition:1s;
}
.p{
text-align: left;
}
.box #header{
font-size: 25px;
font-style:normal;
}
.box span{
font-size: 12px;
}
.minimizeSlider{
background-color: #e4e4e4;
border:none;
position:absolute;
right:0px;
top:0px;
}
<html>
<head>
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
<title>Cermati Banner and Slider</title>
<link rel="stylesheet" href="css/cermati.css">
</head>
<script src="js/cermati.js"></script>
<body class="body">
<header class="navbar">
<!-- <div><span style="vertical-align: middle; padding:0px;">Mau voucher diskon belanja up to 70%?</span></div> -->
<span style="vertical-align: middle; padding:6px;">Mau voucher diskon belanja up to 70%?</span>
<div class="emailInputHolder">
<form action="" class="emailForm">
<input type="text" id="emailText" placeholder="Masukkan email kamu"/>
<button id="navbarButton">DAFTAR</button>
</form>
</div>
</header>
<div id="container">
<div class="row">
<div class="col-xs-12 col-sm-9 col-md-9">
<button id="readMore">Baca Lebih Banyak <span>></span></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/hijab01.jpg"/>
</div>
</div>
</div>
<div class="box">
<div id="content">
<h1 id="header" style="">Belanja Gak Pake Pusing!</h1>
<button class="minimizeSlider" onclick="minimize()">❌</button>
<p>Yuk daftarin emailmu untuk melihat pilihan barang-barang fashion MURAH dan TERKINI dari ribuan toko online terpercaya langsung ke email kamu</p>
<form id="boxForm">
<p><input id="boxTextEmail" type="text" placeholder="Masukkan email kamu disini"/></p>
<p><button id="boxButtonEmail">DAFTARKAN SEKARANG</button></p>
</form>
<span>powered by SumoMe</span>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>