Chrome似乎未遵循解释CSS3中background-size属性的规范。

考虑以下标记

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testing</title>
        <style type="text/css">
            html {height: 100%;}
            body {height: 100%;}
            div {
                height: 100%;
                background-image: linear-gradient(to bottom right,red,green,blue);
                background-size: 30%;
            }
        </style>
    </head>
    <body>
        <div/>
    </body>
</html>


这应该放置单个div,该div填充视图并用彩虹渐变装饰。我的理解是,此梯度应为视图宽度的30%和高度的100%。

background-size属性的specification状态


第一个值给出相应图像的宽度,第二个值给出其高度。如果仅给出一个值,则假定第二个为自动值。


因此,在这种情况下,就好像我已经声明了background-size: 30% auto




一个维的自动值可以通过使用图像的固有比率和另一维的大小来解决,或者通过使用图像的固有大小来解决,或者不通过将其视为100%来解决。


specification for gradients状态


固有尺寸一词是指固有高度,固有宽度和固有纵横比(宽度与高度之间的比率)的集合,对于给定的对象,它们可能存在或可能不存在... CSS梯度,在此规范是完全没有固有尺寸的对象的示例。


因此,auto应该默认为100%,就好像我已经声明了background-size: 30% 100%一样。目前,我要特别声明这一点。

这正是Firefox(56.0.1)似乎显示页面的方式。

css - Chrome/IE 11中的CSS渐变背景大小-LMLPHP

但是,Chrome(62.0.3202.62)没有。它的宽度正确(我可能已经在屏幕截图中剪掉了一些边缘,但是最右边的重复看起来应该是大约10%),但是似乎将高度也解释为30%。 IE 11的外观与Chrome显示器完全相同。

css - Chrome/IE 11中的CSS渐变背景大小-LMLPHP

所以,我的问题是:


我是否正确解释了规范? CSS的最新版本(第4版):权威指南似乎支持我的解释以及developer.mozilla.org上的页面(这表明该属性在某些时候已更改)。
如果是这样,这是否是正在修复/修复的Chrome中的已知错误? caniuse.com未列出Chrome的任何已知问题。
如果没有,我该如何报告Chrome中的错误(由于将没有IE 12,因此显然无法在其中进行修复,但是在Edge中可能会或可能无法正常工作)?

最佳答案

在Chrome错误页面上似乎有一个报告为Issue 711489的错误报告。对于相同的问题,WebKit还针对此问题以Bug 170834 的形式提交了一个错误报告。这两个报告均包含一个根据规格说明正确行为的测试用例。

关于css - Chrome/IE 11中的CSS渐变背景大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46882636/

10-10 01:23
查看更多