Chrome -webkit-clip-path和大纲bug

Question

我在Chrome(30.0.1599.69)中发现了相当奇怪的行为,-webkit-clip-path并想知道它是否是一个bug.

当元素将剪辑路径设置为矩形,然后页面上的某些内容变为ouline(例如,由于焦点)时,剪辑路径将垂直移动.移除轮廓后,剪辑路径不会占用先前的位置.

一个重现它的页面.

初始状态:

有些东西得到了大纲:

然后没有大纲:

注意:由于进一步的轮廓更改不会影响裁剪,因此可以通过应用已知高度的轮廓然后使用offseting clip-path来"修复"此问题,从而有利于"修复"此问题.

更新:

Chromium bugtracker中的一个问题.

我发现rectangle()支持已被删除,但不确定从哪个版本(iOS仍然有它？).polygon()版本在Canary工作正常(2014年4月17日).

Answer 1

这看起来确实像是 Chrome 中的一个错误。我不确定您是否只是想问这是否看起来像一个错误，或者它实际上对您正在处理的项目来说是否是一个麻烦。对于后者，您可以通过删除焦点上的标准 Chrome 轮廓来解决您发现的错误，如果您希望它看起来相同，也可以选择将其替换为框阴影。例如：

input:focus {
    outline: none;

    // Optionally do something like this
    -webkit-box-shadow: 0 0 4px blue;
    -moz-box-shadow: 0 0 4px blue;
    box-shadow: 0 0 4px blue;
}