1

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

Chrome 显示错误

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

  • 它发生在 Chrome 但不是 Firefox
  • 使用此处托管的旧版 Chromium不会发生这种情况。在较新的版本中确实如此。
  • 将鼠标悬停在显示元素上会被夸大
  • 它不会发生在（所有）其他 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>
4

0 回答 0