Question

当我使用CSS滤镜，阴影，变换，SVG（或类似）时，我的Chrome / Chromium显示出奇怪的对角线：

<?php
session_start();
?>

<html>
<body>
<?php

require_once 'login.php';
$connection=new mysqli($db_hostname, $db_username, $db_password,$db_database);
if (!$connection) die("unable to connect to mysqli:".mysqli_error());

mysqli_select_db($connection,"dbase1")
or die("db not selected".mysqli_error());

$sql=" SELECT * FROM tab";
$result=$connection->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc())
    {
?>
<form class="boxed"  style ="border: 4px solid black ; text-align: center; action ="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

<h1> Message </h1>

<?php


echo "Id:  "   . $row["id"].  "<br>". "Name:  "   . $row["name"].  "<br>". " Email :  "  . $row["email"]. "<br>"."Phone # " . $row["phone"]. "<br>"."Message : " . $row["text"]. "<br>";

?>
<input type="submit" class="button" value="delete" style =" background-color: grey;
    border: none;
    color: white;
    padding: 15px 70px;
    margin: 15px 0px;
    cursor: pointer;"/>

</form> 
<?php

}
}
if(isset($_POST['delete']))
        {
            $id= $_POST($connection,'id');
$sql=" DELETE FROM tab WHERE id=".$id;
$result=$connection->query($sql);
}

?>

</body>
<html>

max

Firefox（Windows）/ Canary Chrome 58没有错误.Chrome 56和Chromium 58（Windows）出错。

在这支钢笔中，发现此错误（最后，当打开标题时）：

有人知道这是一个已知的错误还是通过禁用任何选项解决的问题？

Answer 1

这几乎可以肯定是Chrome / Chromium光栅化错误，它似乎特定于某些NVidia GPU：

Issue 691262 Corrupted background with GPU rasterization

Answer 2

如上所述，这是一个GPU问题，但临时解决方法对我很有用：

div {
    position: relative;
    z-index: 0;
}

div:before {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: inherit;
}

Answer 3

我在Chrome中遇到了同样的问题，但我终于发现清理svg文件解决了这个问题。我使用了SVGO https://github.com/svg/svgo。

Chrome / Chromium中的奇怪对角线（错误？）

3 个答案: