css - Chrome -webkit-clip-path 和大纲错误

Question

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

当元素将 clip-path 设置为 rectangle 时，页面上的某些内容变为线条(例如，由于焦点)，clip-path 会垂直移动。删除轮廓后，clip-path 不会占据之前的位置。

A page to reproduce it .

初始状态:

有些东西有轮廓:

然后没有轮廓:

注意:由于进一步的轮廓更改不会影响剪裁，因此我们可以通过应用已知高度的轮廓然后偏移该值的剪裁路径来“修复”问题，这对我们有利。

更新:

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