css – Chrome -webkit-clip-path和outline bug

前端之家收集整理的这篇文章主要介绍了css – Chrome -webkit-clip-path和outline bug前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在Chrome(30.0.1599.69)-webkit-clip-path中发现了相当奇怪的行为,想知道它是不是一个bug.

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

A page to reproduce it.

初始状态:

有些东西得到了大纲:

然后没有大纲:

注意:由于进一步的轮廓更改不会影响剪裁,因此可以使用它来通过应用已知高度的轮廓来“修复”该问题,然后为此值取消剪辑路径.

更新:

An issue in Chromium bugtracker.

我发现矩形()支持was removed,但不确定从哪个版本(iOS仍然有它?). polygon()版本works fine here in Canary (at April 17,2014).

解决方法

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

猜你在找的CSS相关文章