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

4
似乎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属性的规范说明如下:

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

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

一个维度的自动值通过使用图像的固有比率和另一个维度的大小来解析,或者失败后,使用图像的固有大小,或者将其视为100%。

渐变规范也说明了这一点。

“内在尺寸”一词是指内在高度、内在宽度和内在长宽比(宽度与高度之比)的集合,对于给定的对象,每个尺寸可能存在也可能不存在。本规范中定义的 CSS 渐变就是一个没有任何内在尺寸的对象的例子。
因此,“auto”应默认为100%,就好像我已经声明了“background-size: 30% 100%”。目前,我是通过这种方式来解决这个问题的。
这正是Firefox(56.0.1)显示页面的方式。

Firefox capture

然而,Chrome(62.0.3202.62)没有这样做。它可以正确获取宽度(在屏幕截图中可能有一些边缘被切掉,但最右边的重复看起来大约是应该的10%),但似乎将高度解释为也是30%。 IE 11的显示与Chrome完全相同。

Chrome capture

所以,我的问题:

  1. 我是否正确解释了规范?最新版本(第四版)的《CSS权威指南》似乎也支持我的解释,developer.mozilla.org上的页面也是如此(该页面表明此属性在某些时候已有更改)。
  2. 如果是这样,在Chrome中是否存在已知的错误并正在处理/修复?caniuse.com没有列出任何与Chrome相关的已知问题。
  3. 如果不是这样,我应该如何报告Chrome中的错误(因为IE 12将不再更新,所以无法在IE 12中进行修复,但可能在Edge中有效)?

{btsdaf} - wazz
{btsdaf} - Matthew
{btsdaf} - Mr Lister
{btsdaf} - wazz
{btsdaf} - Matthew
显示剩余4条评论
1个回答

0

在Chromium bug页面上,似乎已经有一个被报告为Issue 711489的BUG。对于同样的问题,在WebKit上也有一个被报告的BUG Bug 170834。两个报告都包含了根据规范正确行为的测试用例。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接