Seeing blocky artifacts in Chrome

Question

In the last few weeks, I've noticed my web application has developed some strange graphical glitches. I assumed that my video card was misbehaving and ignored it, since none of the relevant code had changed. Then I noticed the same thing on a coworker's machine, and then confirmed that everyone was seeing it. All machines are Win64, though a mashup of Windows 7 and Windows 10. The application itself uses bootswatch, which essentially themes bootswatch. A screenshot is below

I've since learned the following:

It occurs in Chrome but not Firefox
Using an older build of Chromium hosted here, it does not occur. In newer versions it does.
It is exaggerated by hovering over display elements
It does not happen in (all) other bootswatch themes

I have created a minimal reproduction below.

<!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>

Seeing blocky artifacts in Chrome

0 Answers0