Question

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，并用彩虹渐变装饰。我的理解是这个梯度应该是宽度的30％和高度的100％。

background-size属性的specification状态

第一个值给出相应图像的宽度，第二个值给出它的高度。如果只给出一个值，则假定第二个值为auto。

因此，在这种情况下，就好像我已宣布background-size: 30% auto。

和

通过使用图像的固有比率和其他维度的大小来解析一个维度的自动值，或者使用图像的内在大小来解决这个问题，或者将其失败，将其视为100％。

和specification for gradients州

术语“内在尺寸”是指固有高度，固有宽度和固有纵横比（宽度和高度之间的比率）的集合，对于给定对象，每个可能存在或不存在... CSS渐变在本说明书中定义的是一个完全没有内在维度的对象的例子。

因此，auto应默认为100％，就好像我已声明background-size: 30% 100%一样。目前，具体说明这一点是我如何解决这个问题。

这正是Firefox（56.0.1）似乎如何显示页面。

然而，Chrome（62.0.3202.62）没有。它获得了正确的宽度（我可能在屏幕截图中切掉了一点边缘，但最右边的重复看起来大约应该是10％），但似乎将高度解释为30％。 IE 11看起来与Chrome显示屏完全相同。

所以，我的问题：

我是否正确地解释了规范？ CSS：The Definitive Guide 的最新版本（第4版）似乎支持我的解释以及developer.mozilla.org的页面（这表明此属性在某些时候发生了变化）。
如果是这样，这是Chrome中的一个已知错误，正在处理/修复？ caniuse.com未列出Chrome的任何已知问题。
如果没有，我如何报告Chrome中的错误（因为没有IE 12，显然无法在那里修复，但在边缘可能有效，也可能无效）？

Answer 1

似乎在铬虫页面上有一个以Issue 711489提交的错误报告。对于同一问题，还有一个针对此问题的错误报告，其中WebKit为Bug 170834 。两个报告都包含根据规范的正确行为的测试用例。

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

1 个答案: