Przyspieszona sprzętowo szerokość CSS?
Próbuję zbudować aplikację Phonegap, która pozwoli użytkownikowi zmienić rozmiar układu dwóch kolumn, przesuwając środkowy dzielnik.
Udało mi się to osiągnąć, ale istnieje ogromny problem z UX: jest opóźniony. To nie jest straszne, ale na najnowszym iPadzie jest nawet zauważalne, co mnie niepokoi.
Oto mój JS, który zmienia rozmiar:
$("div").on("touchmove", "#columnResizeIcon", function(e) {
e.preventDefault();
var left = e.originalEvent.touches[0].pageX;
var right = $("#columnContainer").width() - left;
$("#leftColumn").css({
"width":left - 1 + "px",
"right":"auto",
});
$("#rightColumn").css({
"width":right - 1 + "px",
"left":"auto",
});
$("#columnResize").css({
"-webkit-transform":"translate3d(" + left + "px" + ", 0, 0)",
"left":"auto",
});
$("#columnResizeIcon").css({
"-webkit-transform":"translate3d(" + left + "px" + ", 0, 0)",
"left":"auto",
});
});
Zauważysz, że wykorzystujętranslate3d()
aby zmienić „lewą” wartość elementów, ponieważ jest to sprzęt przyspieszany. Uważam, że opóźnienie powstaje ze zmiany szerokości lewej i prawej kolumny, co jest tym, co muszę przyspieszyć sprzętowo.
Możliwym rozwiązaniem, które według mnie może zadziałać, byłoby użycie-webkit-transform:translate3d(50%, 0, 0)
wypchnąć prawą kolumnę ponad połowę strony, a następnie zmienić tę wartość, mając nadzieję, że rozciągnie się ona tylko do momentu dotarcia do rodzica. Trwa to jednak i wynosi 50% strony, a nie 50% rodzica.
Mój znacznik HTML wygląda tak:
<div id="columnContainer">
<div id="columnResize"></div>
<div id="columnResizeIcon"></div>
<div id="leftColumn">
<div class="header">Left Header</div>
<div class="content"></div>
</div>
<div id="rightColumn">
<div class="header">Right Header</div>
<div class="content"></div>
</div>
</div>
I mój CSS:
body{
background-color:#000;
}
#columnContainer{
position: absolute;
bottom:0;
top:0;
right:0;
left:0;
background-color:#000;
}
#leftColumn{
position: absolute;
top:0;
left:0;
right:50%;
bottom:0;
-webkit-overflow-scrolling: touch;
z-index: 1;
margin-right: 1px;
}
#rightColumn{
position: absolute;
top:0;
left:50%;
right:0;
bottom:0;
-webkit-overflow-scrolling: touch;
z-index: 1;
margin-left: 1px;
}
.header{
position: absolute;
left:0;
right:0;
height:33px;
z-index: 5;
background: -webkit-linear-gradient(top, #f4f5f7 0%,#a7abb7 100%);
box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #7A8090, 3px 0 2px rgba(0,0,0,.3);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-size: 17px;
font-family: Helvetica;
font-weight: bold;
letter-spacing: .2px;
text-align: center;
padding-top:9px;
color:#71787F;
text-shadow: 0 1px 0 #E3E5E9;
}
.content{
position: absolute;
left:0;
right: 0;
top:42px;
bottom: 0;
}
#leftColumn .content{
background-color:#F5F5F5;
}
#rightColumn .content{
background-color:#fff;
}
#columnResize{
position: absolute;
width:2px;
top:0;
bottom: 0;
left:50%;
margin-left:-1px;
background-color:#000;
z-index: 2;
}
#columnResizeIcon{
position: absolute;
z-index: 3;
width:10px;
height:30px;
top:50%;
bottom:50%;
margin-top:-15px;
left:50%;
margin-left:-7px;
border-left:2px solid #000;
border-right:2px solid #000;
}