Я пытаюсь создать приложение Phonegap, которое позволит пользователю изменять размер двухколоночного макета, перемещая средний разделитель.

Я смог заставить это работать, но есть огромная проблема с UX:с лагом Это'не страшно, но на последнем iPad этоЭто даже заметно, что меня беспокоит.

Вот's мой JS, который делает изменение размера:

$("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",
    });
}); 

Вы'заметит, что я воспользуюсьtranslate3d() изменить "оставил" значение элементов, так как это аппаратно ускоряется. Я полагаю, что задержка возникает из-за изменения ширины левого и правого столбца, и это то, что мне нужно для аппаратного ускорения.

Возможное решение, которое, как я думал, могло бы сработать, --webkit-transform:translate3d(50%, 0, 0) переместить правый столбец на половину страницы, а затем просто изменить это значение, надеясь, что оно будет растягиваться только до достижения родительского элемента. Однако он продолжается и занимает 50% страницы, а не 50% родительского.

Моя HTML-разметка выглядит так:

    
    

    
        Left Header
        

    
    
        Right Header
        
    

И мой 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;
}