using touchstart causes screen to become fuzzy on touchstart

Question

I am currently testing touchstart functionality on my device (Samsung galaxy S2) for my game. I am programming using javascript and jquery wrapped under phonegap in android and currently having issues as follows:

my touch start event (e.g triggering an attack button "touchstart" event to run some javascript to perform the attack action) causes my screen to become temporarily fuzzy, then back to normal in less than a second, so more like a screen flicker where images become jittery). I am not using css transforms or transitions just plain css and images.

Can someone please let me know if they have encountered moreorless similar issues to mine. A bit at a loss whether it is a hardware or touchstart issue where i can solve that problem.

Sample Javascript below for my navigation controls (left, up, down, right touchstart tap):

if ('ontouchstart' in document.documentElement) {
        var left = document.getElementById('left');
        left.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var l_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var l_xy = l_oldCell.split('_');
            var l_x = l_xy[0];
            var l_y = l_xy[1];

            if(l_y == 1)
            {
                direction = "left";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var l_newCell = l_x + '_' + (parseInt(l_y) - 1);

            //  validate if next cell is empty
            if($('#' + l_newCell + ':has(".shadow")').val() != undefined
            || $('#' + l_newCell + ':has(".ally")').val() != undefined
            || $('#' + l_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "left";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + l_newCell).append($('#' + controlsPlayerChar));
            $('#' + l_oldCell + ' ' + '#' + controlsPlayerChar).remove();   

            //  set char direction to 'left' and set next footstep
            setDirection('left');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var up = document.getElementById('up');
        up.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var u_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var u_xy = u_oldCell.split('_');
            var u_x = u_xy[0];
            var u_y = u_xy[1];

            if(u_x == 1)
            {
                direction = "up";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var u_newCell = (parseInt(u_x) - 1) + '_' + u_y;

            //  validate if next cell is empty
            if($('#' + u_newCell + ':has(".shadow")').val() != undefined
            || $('#' + u_newCell + ':has(".ally")').val() != undefined
            || $('#' + u_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "up";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + u_newCell).append($('#' + controlsPlayerChar));
            $('#' + u_oldCell + ' ' + '#' + controlsPlayerChar).remove();

            //  set char direction to 'up' and set next footstep
            setDirection('up');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var down = document.getElementById('down');
        down.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var d_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var d_xy = d_oldCell.split('_');
            var d_x = d_xy[0];
            var d_y = d_xy[1];

            if(d_x == rows)
            {
                direction = "down";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var d_newCell = (parseInt(d_x) + 1) + '_' + d_y;
            //  validate if next cell is empty
            if($('#' + d_newCell + ':has(".shadow")').val() != undefined
            || $('#' + d_newCell + ':has(".ally")').val() != undefined
            || $('#' + d_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "down";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + d_newCell).append($('#' + controlsPlayerChar));
            $('#' + d_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

            //  set char direction to 'down' and set next footstep
            setDirection('down');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var right = document.getElementById('right');
        right.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var r_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var r_xy = r_oldCell.split('_');
            var r_x = r_xy[0];
            var r_y = r_xy[1];
            if(r_y == cols)
            {
                direction = "right";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var r_newCell = r_x + '_' + (parseInt(r_y) + 1);

            //  validate if next cell is empty
            if($('#' + r_newCell + ':has(".shadow")').val() != undefined
            || $('#' + r_newCell + ':has(".ally")').val() != undefined
            || $('#' + r_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "right";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + r_newCell).append($('#' + controlsPlayerChar));
            $('#' + r_oldCell + ' ' + '#' + controlsPlayerChar).remove();

            //  set char direction to 'right' and set next footstep
            setDirection('right');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });
}

Please let me know if you think anything is amiss with regards to above script. The way I add the touchstart event is the same in other areas of my script when e.g to launch an attack or launch an options menu for instance.

Ha, I just realised that it is occuring when i tap anywhere on the mobile screen. The instant fuzzy effect occurs when i touch anywhere on my mobile screen. — Zen Pak, Feb 18 '12 at 01:51
Your problem is using phonegap! It's dreadful. But anyway, as other users have said, you need to provide some code or more information. — Alexander Holsgrove, Feb 20 '12 at 13:30

score 1 · Answer 1 · answered Feb 14 '12 at 10:52

1

Seems that this is tap highlighting.

You can try to disable this effect applying -webkit-tap-highlight-color CSS property on your controls or disable this in all elements using * selector.

For example:

.someelement {
    -webkit-tap-highlight-color: transparent;
}

answered Feb 14 '12 at 10:52

antyrat

27,479
9
75
76

thanks but this did not work. My images are not being highlighted but just jittery/fuzzy like a tv channel not completely clear when tuning to a correct channel although it happens just momentarily (on touchstart). – Zen Pak Feb 15 '12 at 11:34

Jan Wikholm · Answer 2 · 2012-02-15T14:14:53.973

1

We've ran into this issue when using translate3d transformations.

We fixed it by setting

* { -webkit-transform: translate3d(0,0,0,); }

so that every element is initialized for the 3d space

edited Feb 15 '12 at 14:14

answered Feb 15 '12 at 14:09

Jan Wikholm

1,557
1
10
19

tried it. Did not fix the problem. Still showing jittery screen on touchstart. – Zen Pak Feb 16 '12 at 11:40
then this would require some source html/css/js to be able to debug – Jan Wikholm Feb 17 '12 at 04:23

score 1 · Answer 3 · answered Feb 16 '12 at 00:10

First of all, make sure you are calling preventDefault() on the event. I've noticed that if you are targeting mouse events as well, they can fire on touch. Otherwise, I use a slightly different method of disabling touch highlighting. Try:

 -webkit-tap-highlight-color: rgba(0,0,0,0);

In the css for your button.

using touchstart causes screen to become fuzzy on touchstart

3 Answers3