cursor del ratón no cambia si un puntero no se mueve en los navegadores basados ​​en WebKit

Question

Supongamos que tenemos código de jQuery simple como lo siguiente:

var $document = $(document); 
$document.ready(function() { 
    var $test = $("#test"); 
    $document.keydown(function(e) { 
     e.shiftKey && $test.css("cursor", "pointer"); 
    }); 
}); 

El problema es que WebKit no cambia el cursor del ratón #test bloque si el puntero del mouse se mueve sobre el bloque #test, y se presiona la tecla Shift. Pero tan pronto como mueva el cursor, Chrome y Safari cambian el estilo del cursor a pointer, exactamente como se espera, pero sin mover el mouse. Este error (?) No es relevante para Firefox, y no lo revisé en Internet Explorer y Opera ...

Entonces, ¿alguien tenía experiencia con el mismo problema? Tal vez, hay una solución para eso?

Gracias de antemano.

Answer 1

Este es un error bien conocido en el motor de webkit, y no hay una solución real para ello.

Answer 2

Tuve este problema usando Chromium 11.0.696.65. Pude resolverlo con un poco de JavaScript retrasado.

Estaba tratando de hacer un letrero electrónico que consiste en un gran monitor LCD impulsado por una pequeña computadora industrial sin disco que ejecuta Chromium en Ubuntu. En la puesta en marcha, se ejecuta algo como:

chromium-browser --kiosk 'http://server:4662/1920x1080/status.html?id=42' 

La página descargado tiene un bucle de votación XHR que recibe un objeto JavaScript algo cambia literales siempre relacionados con id=42, momento en el cual, se actualiza la pantalla apropiada. Hay CSS que especifica que todos los elementos deben tener un puntero de mouse en blanco.

El problema fue que el puntero del mouse en progreso de Chrome se dejó en la pantalla. Desapareció tan pronto como moví el mouse. Sin embargo, el signo real no tendrá un mouse conectado, y mucho menos un usuario para moverlo.

I añade el siguiente script:

function $(id) {return document.getElementById(id);} 

function onLoad() 
{ 
    window.setTimeout(hideCursor, 1000); 

    function hideCursor() { 
     $('content').style.cursor = 'url(/blankCursor.gif),auto'; 
    } 
} 

window.onload = onLoad; 

Ahora, el cursor molesto muestra brevemente en el arranque, pero se desvanece en un segundo. Luego, el signo se ejecuta sin cursor hasta el siguiente inicio (días o semanas).

Por cierto, el ,auto parece ser otro error de Chromium. Encontré que si solo pongo url(/blankCursor.gif), no respetará la declaración.

Answer 3

Al contrario de lo que se dijo antes, esta solución que encontré de David Becker parece ser efectiva. (Las correcciones para los navegadores están en la tubería. Ver https://bugs.webkit.org/show_bug.cgi?id=101857)

function _repaintCursor() { 
    var saveCursor = document.body.style.cursor, 
     newCursor = saveCursor ? "" : "wait"; 
    _setCursor(newCursor); 
    _setCursor(saveCursor); 
} 

function _setCursor(cursor) { 
    var wkch = document.createElement("div"); 
    var wkch2 = document.createElement("div"); 
    wkch.style.overflow = "hidden"; 
    wkch.style.position = "absolute"; 
    wkch.style.left = "0px"; 
    wkch.style.top = "0px"; 
    wkch.style.width = "100%"; 
    wkch.style.height = "100%"; 
    wkch2.style.width = "200%"; 
    wkch2.style.height = "200%"; 
    wkch.appendChild(wkch2); 
    document.body.appendChild(wkch); 
    document.body.style.cursor = cursor; 
    wkch.scrollLeft = 1; 
    wkch.scrollLeft = 0; 
    document.body.removeChild(wkch); 
} 

Answer 4

he encontrado una solución al problema.

Parece que el cursor se cambia si fuerza al navegador a volver a funcionar. Por lo tanto, si establece el cursor en elem y luego llama al elem.scrollTop (o cualquier cantidad de propiedades que activen un reflujo), el cursor se actualizará en su lugar.

Así que en su caso el código terminaría siendo:

var $document = $(document); 
$document.ready(function() { 
    var $test = $("#test"); 
    $document.keydown(function(e) { 
     e.shiftKey && $test.css("cursor", "pointer"); 
     $test[0].scrollTop; 
    }); 
});