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

Question

Chrome 似乎没有遵循 CSS3 中解释背景大小属性的规范。

考虑以下标记

<!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%。

背景大小属性状态的 specification

The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be auto.

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

和

An auto value for one dimension is resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%.

和specification for gradients州

The term intrinsic dimensions refers to the set of the intrinsic height, intrinsic width, and intrinsic aspect ratio (the ratio between the width and height), each of which may or may not exist for a given object... CSS gradients, defined in this specification, are an example of an object with no intrinsic dimensions at all.

因此，auto 应该默认为 100%，就好像我声明了 background-size: 30% 100%。目前，具体声明这就是我解决这个问题的方法。

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

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

那么，我的问题是：

我对规范的理解是否正确？ CSS 的最新版本（第 4 版）：权威指南 似乎支持我的解释以及 developer.mozilla.org 的页面（这表明属性在某些时候发生了变化）。
如果是这样，这是 Chrome 中的一个已知错误吗？正在处理 on/fixed？ caniuse.com 没有列出 Chrome 的任何已知问题。
如果不是，我该如何报告 Chrome 中的错误（因为不会有 IE 12，它显然不能在那里修复，但在 Edge 中可能工作也可能不工作）？

Answer 1

似乎有一份针对同一问题提交为 Issue 711489 at the chromium bug page. There is also a bug report filed for this with WebKit as Bug 170834 的错误报告。两个报告都包含根据规范正确行为的测试用例。

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

CSS gradient background-size in Chrome / IE 11

css

gradient

google-chrome

linear-gradients