css - expand div's width is lagging on retina device -

i made animation expand width of divs on hover, on retina device animation lagging lot, there way fix ? or how can replace transform css (like translate or scale) similar animation ?

.col-3 {      width: 30%  }  body {      height: 100%;      width: 100%;      background: black;  }  #container-home {      position: absolute;      height: 100%;      width: 100%;      white-space: nowrap;      margin-left: -10%;  }  #container-home .section-in {      display: inline-block;      height: 100%;      position: relative;      top: 0;      left: 0;      margin-left: -4px;      background: 353547;      overflow: hidden;      -webkit-transform: skew(-20deg);      -moz-transform: skew(-20deg);      -o-transform: skew(-20deg);      transition: 1s cubic-bezier(.19, 1, .22, 1);  }  #container-home .section-in:hover {      width: 40%;      left: -50px;      margin-right: -50px;  }  #container-home .section-in .section-bg {      position: absolute;      height: 100%;      left: 50%;      margin-left: -90%;      width: 180%;      -webkit-transform: skew(20deg);      -moz-transform: skew(20deg);      -o-transform: skew(20deg);  }  #container-home .section-bg {      background: url("https://source.unsplash.com/category/nature") no-repeat;      background-size: cover;  }

<div id="container-home">     <div class="col-3 section-in">        <div class="section-bg"></div>     </div>     <div class="col-3 section-in">        <div class="section-bg"></div>     </div>     <div class="col-3 section-in">        <div class="section-bg"></div>     </div>     <div class="col-3 section-in">        <div class="section-bg"></div>     </div>  </div>