Chrome -webkit-clip-path 和大纲错误答案

【问题标题】：Chrome -webkit-clip-path and outline bugChrome -webkit-clip-path 和大纲错误
【发布时间】：2013-10-26 19:23:20
【问题描述】：

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

当元素的 clip-path 设置为矩形，然后页面上的某些内容变为 ouline（例如，由于焦点），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).

【问题讨论】：

确保查看 chromium 项目，看看是否有错误。code.google.com/p/chromium/issues/list
谢谢，我查看了可疑的“剪辑路径”和“大纲”问题，但没有发现类似问题。
你的最终结果是什么？
这看起来像一个真正的错误。您是否已提交报告？

标签： css google-chrome clip

【解决方案1】：

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

【讨论】：

【解决方案2】：

这看起来确实像 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;
}

【讨论】：