Hardware Acceleration

by XTREME104

HTML

Drag the two windows around on iOS, notice the non-hardware accelerated window lags
<button onclick="var nHA = new Window('Not_Hardware_Accelerated', '', false); nHA.open();  var hA = new Window('Hardware Accelerated', '', true); hA.open();">Open Window</button>

<script>
    function Window(title, content, hardwareAccelerated) {
    this.hardwareAccelerated = hardwareAccelerated;
    if (this.hardwareAccelerated) {
    this.hardwareAccelerationStyle = " -webkit-transform: translate3d(0,0,0);";
    } else {
    this.hardwareAccelerationStyle = null;
    }
    this.title = title;
    this.content = content;
    this.windowdiv = document.createElement('div');
    this.windowdiv.id = this.title;
    this.windowdiv.innerHTML = "<div class='window' style='z-index:2; min-width: 200px; min-height: 150px; top: 0; left: 0; -webkit-animation: open 300ms ease-in;" + this.hardwareAccelerationStyle + "'><div id='titlebar' onmousedown='dragHandler()' ontouchstart='this.onmousedown=null; touchDragHandler();'>" + this.title + "<\/div><div id='body'>" + this.content + "<\/div><\/div>";
    this.open = function () { document.body.appendChild(this.windowdiv); };
    this.close = function() { document.body.removeChild(document.getElementById(this.title)); };
    }
    
    var windowTarget = null; // The target layer (effectively window)
    var dragOK = false; // True if we're allowed to move the element under mouse
    var dragXoffset = 0; // How much we've moved the element on the horizontal
    var dragYoffset = 0; // How much we've moved the element on the verticle
    
    function moveHandler() {
    if (dragOK) {
    windowTarget.style.left = window.event.clientX - dragXoffset + 'px';
    windowTarget.style.top = window.event.clientY - dragYoffset + 'px';
    return false;
    }
    }
    
    function touchMoveHandler() {
    if (dragOK) {
    windowTarget.style.left = window.event.touches[0].pageX - dragXoffset + 'px';
    windowTarget.style.top =...

CSS

body {
    background: #AADFFF;
    -webkit-perspective: 1000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.window {
    position:absolute;
    z-index:2;
    min-width: 200px;
    min-height: 150px;
    top: 0;
    left: 0;
    margin: 10% 10%;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    box-shadow: 0 0 10px 3px rgba(0,0,0,0.5), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25);
    text-shadow: 0 0 5px white;
    font-family: Segio-UI;
    -webkit-animation: open 300ms ease-in;
}

div#Not_Hardware_Accelerated > div.window {
    margin: 10% 60%;
}

div.window > div#titlebar {
    text-overflow: ellipsis;
    word-wrap: break-word;
}

@-webkit-keyframes open {
    from {
        -webkit-transform: rotateX(10deg);
} to {
    -webkit-transform: rotateX(0deg);
}
}

@-webkit-keyframes close {
    from {
        -webkit-transform: rotateX(0deg);
} to {
    -webkit-transform: rotateX(10deg);
    display: none;
}
}

div.window > div#titlebar {
    margin-left: 10px;
}

div.window > div#body {
    position: absolute;
    top: 20px; /* titlebar + chrome.top */
    bottom: 0; /* chrome.bottom */
    left: 0; /* chrome.left */
    right: 0; /*chrome.right */
    margin: 2px; /* chrome.padding */
    border: 1px solid gray;
    overflow: auto;
}

#wrapper > img {
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    max-height: 35px;
    max-width: 35px;
}

#wrapper > img:hover {
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    max-height: 50px;
    max-width: 50px;
}

#wrapper.accelerated > img  {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
}

#wrapper.accelerated > img:hover  {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform:...