Chrome -webkit-clip-path和大纲bug

Question

我在Chrome（30.0.1599.69）-webkit-clip-path中发现了相当奇怪的行为，并想知道它是否是一个错误。

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

A page to reproduce it

初始状态：

有些东西得到了大纲：

然后没有大纲：

注意：由于进一步的轮廓更改不会影响剪裁，因此可以通过应用已知高度的轮廓然后使用offseting剪辑路径来“修复”此问题，从而有利于“修复”此问题。

更新

An issue in Chromium bugtracker

我发现rectangle()支持was removed，但不确定从哪个版本（iOS仍然拥有它？）。 polygon()版本works fine here in Canary (at April 17, 2014)。

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;
}

Answer 2

我也注意到了这个bug或类似的问题。与-webkit-clip-path有关。我看了，似乎没有提出问题（https://code.google.com/p/chromium/issues/list）。您的测试似乎不再像您所描述的那样有效。