html - Opera 是否错误处理了带有百分比值的背景位置和/或背景大小？

Question

我试图在具有可变尺寸的元素上使用背景图像作为 Sprite 。因此，我为 background-size 和 background-position 使用基于百分比的值。

我在 Opera(最新版本，12.14)中遇到过这个问题。我怀疑是 background-position 和 background-size 与基于百分比的值的组合导致了不当行为。我徒劳地搜索了任何相关信息或公认的问题。

为了演示我面临的问题，我创建了一个 560 x 560 像素的图像，主要是橙色，右下角的蓝色方 block 除外，尺寸为 112 x 112 像素，大小的五分之一图像的。

要将此图像用作元素的背景，以便蓝色方 block 完全准确地覆盖它，而不管元素的尺寸如何，我使用了以下样式:

.square
{
    background-size: 500% 500%;
    background-position: -400% -400%;
}

这在除 Opera 之外的所有浏览器中都能完美运行，Opera 在元素的右侧和底部边缘显示一些橙色。我推测这些橙色切片是重复的背景图像，就好像 Opera 对图像的偏移超出了应有的范围。

我创建了 a jsfiddle test that demonstrates the issue ，您可以在 Opera 中查看我所描述的不良行为。

有关 Opera 的详细信息，摘自 opera:about 的顶部:

Version information

Version: 12.14
Build: 1738
Platform: Win32
System: Windows 7

Browser identification

Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14

我已经能够收集一些可能提供一些线索的信息:

• 图像越大，偏移越远(即，background-position 的值越大)，Opera 越容易出错。

• 如果元素恰好是蓝色方 block 的大小(在本例中为 112 x 112 像素 - 您可以在 jsfiddle 中看到)，Opera 会正确呈现。

• 如果(打起精神)图像尺寸是 100 的倍数(即 500 x 500 像素，而不是 560 x 560 像素)，Opera 会正确呈现。

目前，我猜这是 Opera 的一个错误，因为它在所有其他浏览器中都可以正常工作。我的问题是:

• 这是一个合理的假设，还是一个已知问题？ Opera 是否违反相关规范？

• 除了将图像重新渲染为 100 的倍数以外，是否有修复或解决方法？

Answer 1

几个月前我将此行为作为“错误”报告给 Opera，我刚刚在最新版本的 Opera (17.0) 中重新测试了它，它按预期工作，所以我假设答案是我的问题如下:

• 是的，这是一个合理的假设。是的，它违反了一些规范。
• 是的，您可以更新到最新版本的 Opera，它的行为符合预期。

作为引用，关于我刚刚测试的 Opera 的详细信息，再次从 opera://about 的顶部获取:

Opera 17.0

Made to discover

Version information

Version:    17.0.1241.45 - Checking for updates...
Update stream:  Stable
System: Windows 7 64-bit (WoW64)
Browser identification

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45