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

【问题标题】：CSS gradient background-size in Chrome / IE 11Chrome / IE 11 中的 CSS 渐变背景大小
【发布时间】：2017-10-23 05:43:22
【问题描述】：

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

specification 用于 background-size 属性状态

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

因此，在这种情况下，就好像我声明了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，它显然无法在那里修复，但在 Edge 中可能会也可能不会工作）？

【问题讨论】：

想知道添加开始和结束 div 标签是否会产生差异。
@wazz 你什么意思？用<div></div> 替换<div/>？我只是尝试过，它并没有改变行为（而且我没有看到它应该有的任何理由）。我并不是真的在寻找解决方法（我有一个 - 明确声明 100% 高度），但我更关心根据规范确定哪种行为是正确的，如果 Chrome 错误，确保得到报告和最终在以后的更新中修复（我不知道 Chrome 错误是在哪里报告的）。
我明白了。只是一个偶然的想法。
MDN 确实明确表示，“如果您使用作为背景并指定背景大小来配合它，最好不要指定使用单个自动组件的大小，或者仅使用宽度值指定（例如，background-size: 50%），这种情况下的渲染在Firefox 8中有所改变，目前跨浏览器普遍不一致，并非都实现完整渲染符合 CSS3 背景尺寸规范和 CSS3 图像值渐变规范。”
@wazz 当我说该网站表明该属性已更改时，这就是我所指的（在同一页面上加上脚注 1）。这就是为什么我很确定我正确地解释了规范（以及所提到的书似乎同意我的观点，并且作者是该主题的严肃权威）。但是，该站点指的是相对较旧的 Chrome 版本。如果它不正确，我本来希望现在已经修复。因此我的第二个和第三个问题（如果它是错误的，我希望 caniuse.com 提及不一致）。

标签： css google-chrome gradient linear-gradients

【解决方案1】：

似乎在 chromium 错误页面上有一个错误报告为Issue 711489。对于同样的问题，还有一个使用 WebKit 作为Bug 170834 的错误报告。两份报告都包含一个测试用例，用于根据规范进行正确行为。

【讨论】：