Question

我正在开发一个网络应用程序，允许用户通过websocket发送消息，告诉网页显示图像或清除屏幕上的所有图像。

然而，有时，图像似乎是不可见的。当我单击图像所在的区域时，Javascript将图像注册为单击。如果我打开Chrome开发者工具，图像就会变得可见。（我不需要检查元素;只需点击F12即可。）

我只看到这个错误出现在Fedora上的谷歌浏览器中（不幸的是，所有使用我们网络应用程序的计算机都会出现）。当我在Windows上的谷歌浏览器中测试它时，我没有看到它。

我遇到的最接近的StackOverflow问题似乎是this one。但是，这个问题似乎没有达成一致同意的答案。我想尝试其Z轴建议，但为了将图像定位在特定用户请求的坐标上，我（想）我必须使用position：fixed，这似乎不允许Z轴坐标。与此问题的答案中的其他建议一起，父容器似乎不在一个陌生的地方，我无法禁用Javascript，因为我需要它来使Web应用程序正常工作。我不需要使用开发人员工具将鼠标悬停在隐形图像上以使其显示，因此我没有查看与悬停相关的错误修正。

我创建了一个简化版的Web应用程序，默认显示图像。当用户单击图像时，它会清除屏幕，等待几秒钟，然后将图像重新放回屏幕上。 I put this version in JSFiddle。当我在Fedora上打开谷歌浏览器中的小提琴时，在点击图像，页面清晰，并且看到图像重新出现几次（可能介于10到50次之间）后，再次出现错误。

我的简化页面如下：

HTML：

<body>
    <div id="container">
    </div>
</body>

CSS：

#container{
            width:100%;
            height:100%;
            position:relative;
    }

Javascript：

$( document ).ready(function() {
    placeImageOnscreen(); 
});

function placeImageOnscreen() {
    console.log("Placing the image on the screen.");
    var imageObject = document.createElement("img");
    imageObject.src = "http://a-z-animals.com/media/animals/images/original/bearded_dragon1.jpg";

    imageObject.addEventListener("click", clearScreen, false);

    var containerDiv = document.getElementById("container");
    containerDiv.appendChild(imageObject);

}

function clearScreen() {
    console.log("Clearing the image off the screen.");
    $('#container img').remove();

    setTimeout(placeImageOnscreen, 3000);
}

这是Fedora版Google Chrome中的错误吗？有没有人知道为什么有时会出现图像但不可见？

Javascript图片不可见，但仅限Fedora上的Google Chrome

0 个答案: