Mouse cursor not changing if a pointer is not moved in Webkit-based browsers

五迷三道 提交于 2019-11-29 13:24:40

This is a well known bug in then webkit engine, and there is no real workaround for it.

I had this problem using Chromium 11.0.696.65. I was able to solve it with a little delayed JavaScript.

I was trying to make an electronic sign consisting of a large LCD monitor driven by a small diskless industrial computer running Chromium on Ubuntu. On start up, it runs something like:

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

The downloaded page has an XHR polling loop which receives a JavaScript object literal whenever anything changes relating to id=42, at which time, it updates the display appropriately. There is CSS specifying all elements should have a blank mouse pointer.

Problem was, Chrome's request-in-progress mouse pointer was left sitting on the screen. It disappeared as soon as a I moved the mouse. However, the real sign won't have a mouse attached, much less a user to move it.

I added the following 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;

Now, the annoying cursor shows up briefly on startup, but vanishes in a second. Then the sign runs cursorless until the next startup (days or weeks).

BTW, the ,auto appears to be another Chromium bug. I found if I just put url(/blankCursor.gif), it won't honor the declaration.

Contrary to what was said before, this workaround I found from David Becker seems to be effective. (The fixes for the browsers are in the pipe. See 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);
}

I've found a workaround to the problem.

It seems the cursor is changed if you force the browser to reflow. So, if you set the cursor on elem and then call elem.scrollTop (or any number of properties which trigger a reflow), the cursor will update in place.

So in your case the code would end up being:

var $document = $(document);
$document.ready(function() {
    var $test = $("#test");
    $document.keydown(function(e) {
        e.shiftKey && $test.css("cursor", "pointer");
        $test[0].scrollTop;
    });
});
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!