Question

在过去的几周里，我发现我的网络应用程序已经出现了一些奇怪的图形故障。我认为我的视频卡行为不端而忽略了它，因为相关代码都没有改变。然后我在同事的机器上注意到了同样的事情，然后确认每个人都看到了它。所有机器都是Win64，虽然是Windows 7和Windows 10的混搭。应用程序本身使用bootswatch，它基本上是主题bootswatch。屏幕截图位于

下方

我从那以后学到了以下内容：

它出现在Chrome中但不是Firefox
使用较早版本的Chromium托管here，它不会发生。在新版本中它确实如此。
将鼠标悬停在显示元素上会夸大其词
在（所有）其他bootswatch主题

我在下面创建了一个最小的复制品。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Chrome Artifact Repro</title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css" rel="stylesheet">

    <style>
        .menu-item {
        padding: 0 25px;
        cursor: pointer;
        font-size: 1.5em;
        }

        .menu-item.active {
            color: #5bc0de;
        }

        .menu-item:hover {
            color: #fff;
        }
    </style>
  </head>

  <body>
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span title="Span A" class="menu-item active">A</span>
                <span title="Span B" class="menu-item">B</span>
                <span title="Span C" class="menu-item">C</span>
                <span title="Span D" class="menu-item active">D</span>
            </div>
        </div>
    </div><!-- /.container -->
  </body>
</html>

看到Chrome中的块状工件

0 个答案: