Ich versuche, eine Phonegap-App zu erstellen, mit der der Benutzer die Größe eines zweispaltigen Layouts ändern kann, indem er den mittleren Teiler bewegt.

Ich konnte das zum Laufen bringen, aber es gibt ein riesiges UX-Problem: Es ist träge. Es ist nicht schrecklich, aber auf dem neuesten iPad fällt es sogar auf, was mich beunruhigt.

Hier ist mein JS, der die Größenänderung vornimmt:

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

Du wirst bemerken, dass ich das ausnützetranslate3d() den "linken" Wert der Elemente zu ändern, da dies hardwarebeschleunigt ist. Ich glaube, die Verzögerung entsteht durch das Ändern der Breiten der linken und rechten Spalte, was ich brauche, um die Hardware zu beschleunigen.

Eine mögliche Lösung, von der ich dachte, dass sie funktionieren könnte, wäre die Verwendung-webkit-transform:translate3d(50%, 0, 0) Schieben Sie die rechte Spalte über die Hälfte der Seite, und ändern Sie dann nur diesen Wert, in der Hoffnung, dass er nur gedehnt wird, bis er das übergeordnete Element erreicht. Es wird jedoch fortgesetzt und geht 50% der Seite, nicht 50% der übergeordneten Seite.

Mein HTML-Markup sieht folgendermaßen aus:

<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>

Und mein 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;
}