在同一元素上复制 Zoom CSS 属性会将 Chrome 中的缩放重置为 1答案

【问题标题】：Duplicating Zoom CSS property on the same element resets zoom to 1 in Chrome在同一元素上复制 Zoom CSS 属性会将 Chrome 中的缩放重置为 1
【发布时间】：2014-06-23 20:19:19
【问题描述】：

这是我遇到的问题（错误？）的简化版本：

http://jsfiddle.net/LxkA2/8/

注意第三个元素和相关的样式：

.zoom-twice-same {
    zoom: 2;
}
.zoom-twice-same {
    zoom: 2;
}

在 Chrome 中，此重置该元素的缩放为 1。同样的事情发生在：

.zoom-twice-same, .zoom-twice-same {
    zoom: 2;
}

然而，

.zoom-twice-same {
    zoom: 2;
}
.zoom-twice-same {
    zoom: 3;
}

按预期工作（元素 2）。

此外，

.zoom-twice-same {
    zoom: 2.000001;
}

.zoom-twice-same {
    zoom: 2;
}

按预期工作。使用 zoom: 2.0000001 和 2 不会。

这是一个错误还是有这种行为的原因？

【问题讨论】：

很好的发现.. 这真的很奇怪。您会认为这些属性会相互覆盖。可以安全地假设这是一个 Chrome 渲染错误..
@JoshCrozier 这就是我的想法。我通过 Chrome 提交了错误报告。我想这不是一个巨大的错误，但在处理一些导致 CSS 重叠的库时可能会很痛苦（在我的情况下，角度动画）。

标签： css google-chrome zooming

【解决方案1】：

我检查了您的 JSFiddle，发现您的以下 CSS 重复了两次：

.zoom-twice-same {
    zoom: 2;
}

当我删除第二个.zoom-twice-same 时，问题没有再次出现，您将看到here。

【讨论】：

对...我的 jsfiddle 特别指出重复的 CSS 缩放定义导致根本不应用缩放。