Google Chrome 中非常奇怪的渲染行为答案

【问题标题】：Really strange render behavior in Google ChromeGoogle Chrome 中非常奇怪的渲染行为
【发布时间】：2014-09-26 22:32:47
【问题描述】：

我正在玩一点 JavaScript 和 jQuery，我发现 Google Chrome 有问题，但 Mozilla Firefox 没有。问题是 ALL 输入正确更新，除了带有 Opacity 标签的输入。

它会以一种奇怪的方式更新，例如当我聚焦或聚焦时，或者当我点击五六次时。

这是FIDDLE。（使用每个输入中的箭头更改值）

为什么 Google Chrome 会像这样呈现 Bad Input 数字字段而其他字段不是？

如果你没有得到任何奇怪的行为，它似乎来自我的机器（Linux Mint 17），但现在不要确定。

编辑：

我希望当您单击箭头时输入会立即增加/减少。对于某些输入有效，而对于其他输入，更新会延迟或其他原因。

【问题讨论】：

我不熟悉您使用的语法。问题可能在这里Opacity: <number></number>。试试Opacity: <input type="number" id="opacity" />
你不是很具体。 “以一种奇怪的方式”？ “像那样”？ “奇怪的行为”？请准确描述您期望发生的事情以及正在发生的事情。
我说“当我失去焦点时”。后面的 JS 不太重要。问题是输入以不同的方式更新。检查小提琴
这对你来说可能很清楚——因为你已经知道 IT 是什么。对于我们其他人，您可能希望在您的问题中充分描述该行为。正如@Blazemonger 明确询问的那样，预计会发生什么，会发生什么？
如果我从 .colorPicker 规则中注释掉 /*-webkit-filter: drop-shadow(0 0 3px black);*/ ，它在 Chrome 中对我来说可以正常工作。

【解决方案1】：

转载，使用 Mac OS Mavericks 和最新的 Chrome / Firefox。

由于某种原因，它违反了 .colorPicker 样式中的 -webkit-filter 规则。你可以用 box-shadow 替换它，它工作正常，看起来一样：

.panel, color .colorPicker {
...
  /*-webkit-filter: drop-shadow(0 0 3px black);*/
  box-shadow: 0 0 3px black;
...
}

...但究竟为什么仍然是个谜！正如 Vivek 在上面的 cmets 中指出的那样，在原始帖子的小提琴中，您还可以通过调整窗口大小来强制重绘 inout。因此，由于某种原因，Blink 重绘过程被 -webkit-filter 阻止。

目前正在阅读 Blink 错误...

【讨论】：

你从哪里知道它在哪里坏了？你使用一些 css 验证工具之类的？
本能，我猜。您的代码在 Firefox 中看起来不错并且运行良好，所以我觉得您是对的，这是一种奇怪的行为，而不是某种程序化的东西。所以我放大了“奇怪”的东西并开始禁用它们，看看会发生什么！
非常感谢您花时间。您真的让我很开心！也有美好的一天！干杯！！！