mardi 4 août 2015

Can I avoid reaction delay (nearly 1s) in web pages on iPhone 6?

Question

Is there any way, perhaps hardware acceleration, or WebGL, or anything, anything, I can do to speed up touch reaction speed on iPhone? I would really like the reaction to appear instant.

My problem

I noticed that my menu was taking nearly a full second to react to its icon being tapped on an iPhone 6, while the menu reacts instantly to a click on desktop. I notice this seems to be the case with all the mobile websites I visited for testing, and the ~1s delay is really bothersome, it takes away that crisp, reactive feel from the web application. Installed applications on iOS, on the other hand react instantly to touch, so I know it isn't the touch detection speed.

Example

I created an example to test this out:

var size = 'norm';
var $box = $('#box').on('click', function () {
    if (size == 'norm') {
        $box.css({
            'width' : '1in',
            'height' : '1in'
        });
        size = 'big';
    } else {
        $box.css({
            'width' : '',
            'height' : ''
        });
        size = 'norm';
    }
});
#box {
    width:0.5in;
    height:0.5in;
    margin:0.5in;
    background-color:violet;
}
<script src="http://ift.tt/1oMJErh"></script>
<div id="box"></div>

Tap the box on an iPhone and you'll see what I mean.

What I've tried

I tried inserting -webkit-transform: translateZ(0); into the item's style to activate hardware acceleration, but this didn't seem to improve speed.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire