8

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

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

一个页面来重现它。

初始状态：

一切都好

一些东西得到一个轮廓：

错误清晰可见

然后没有大纲：

在此处输入图像描述

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

更新：

Chromium bugtracker 中的一个问题。

我发现rectangle()支持已被删除，但不确定是从哪个版本开始的（iOS 仍然有它吗？）。polygon()版本在 Canary (at April 17, 2014) 中运行良好。

4

2 回答 2

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;
}
于 2013-11-10T21:40:19.487 回答
0

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

于 2014-07-12T18:43:41.770 回答