Chrome 在渲染多个渐变时在中间留下白色 space/gap

Question

我正在阅读 Lea Verou 的书 "CSS Secrets"。

有一个圆角径向多重渐变的例子： http://dabblet.com/gist/24484257bc6cf7076a8e

IE11、Edge 和 FF 按预期正确显示。但是 Chrome 在块内部创建了奇怪的边框。我不明白为什么。它看起来像一个错误。谁能解释这种行为，这可能只是 Blink 规范的一部分？

div {
 background: #58a;
 background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
             radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
             radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
             radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
 background-size: 50% 50%;
 background-repeat: no-repeat;
 
    width:4em;
    height:4em;
 padding: 1em 1.2em;
 max-width: 12em;
 color: white;
 font: 130%/1.6 Baskerville, Palatino, serif;
}

<div></div>

Answer 1

我没有任何官方消息来源支持这个答案（目前还没有，我正在努力寻找，如果我能找到的话会添加到这里）但我在 Chrome 中看到过类似的问题在过去，它们似乎是因为计算值在 Chrome 中的四舍五入方式。此处进行四舍五入是因为背景大小在 X 轴和 Y 轴上均为 50%，而 50% 的计算值是分数。计算在下面的代码片段中以内联注释的形式提供。

Blink/WebKit 似乎将计算值向下舍入，而不管它是否高于 0.5。在此演示中，元素的总高度为 124.8px，宽度为 133.12px。因此，50% 的值变为 62.4px 和 66.56px（四舍五入为 62 和 66px）。代码段中的第三个 div 将这些值明确设置为 background-size，我们可以看到它的输出看起来与第一个（具有 background-size: 50% 50%）相同，从而证明了解释。

这样四舍五入后，背景实际占用的面积横向为132px（比实际宽度少1.12px），纵向为124px（比实际高度少0.8px） .因此它在两者之间留下了差距。

This blog post by John Resig 还提供了一些关于浏览器中舍入处理方式的见解。正如我们所见，Blink/WebKit 正在向下舍入，而 IE 似乎正在向上舍入。四舍五入意味着计算值将变为 63px 和 67px，这不会明显显示任何问题，因为所有边的颜色都相同，所以它们只是重叠并填充 space（Chrome 也显示当我们为背景大小明确设置这些值时没有问题 - 请参阅第二个 div）。 Firefox 似乎有一个全面的舍入逻辑，它似乎将一些舍入，而另一些则舍入以完全填充 space，因此也没有显示任何问题。

div {
 background: #58a;
 background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
             radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
             radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
             radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
 background-size: 50% 50%;
 background-repeat: no-repeat;
 
    width:4em;            /* 83.2px */
    height:4em;           /* 83.2px */
 padding: 1em 1.2em;   /* left/right padding = 24.96px, top padding = 20.8px */
 max-width: 12em;
 color: white;
 font: 130%/1.6 Baskerville, Palatino, serif;  /* font-size = 130% of 16px = 20.8px */
}

/* so,
total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)
total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)
*/

div:nth-of-type(2) {
  background-size: 67px 63px;
}
div:nth-of-type(3) {
  background-size: 66px 62px;
}

div{
  display: inline-block;
  margin: 10px;
}

<div></div>
<div></div>
<div></div>

不仅径向渐变会出现这种情况，线性渐变也会出现这种情况。

div {
 background: #58a;
 background: linear-gradient(red, red) top left,
             linear-gradient(blue, blue) top right,
             linear-gradient(green, green) bottom right,
             linear-gradient(tomato, tomato) bottom left;
 background-size: 50% 50%;
 background-repeat: no-repeat;
 
    width:4em;            /* 83.2px */
    height:4em;           /* 83.2px */
 padding: 1em 1.2em;   /* left/right padding = 24.96px, top padding = 20.8px */
 max-width: 12em;
 color: white;
 font: 130%/1.6 Baskerville, Palatino, serif;  /* font-size = 130% of 16px = 20.8px */
}

/* so,
total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)
total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)
*/

div:nth-of-type(2) {
  background-size: 67px 63px;
}
div:nth-of-type(3) {
  background-size: 66px 62px;
}

div{
  display: inline-block;
  margin: 10px;
}

<div></div>
<div></div>
<div></div>

还有图片。

div {
 background: #58a;
 background: url(http://lorempixel.com/100/100/animals/1) top left,
             url(http://lorempixel.com/100/100/animals/2) top right,
             url(http://lorempixel.com/100/100/animals/3) bottom right,
             url(http://lorempixel.com/100/100/animals/4) bottom left;
 background-size: 50% 50%;
 background-repeat: no-repeat;
 
    width:4em;            /* 83.2px */
    height:4em;           /* 83.2px */
 padding: 1em 1.2em;   /* left/right padding = 24.96px, top padding = 20.8px */
 max-width: 12em;
 color: white;
 font: 130%/1.6 Baskerville, Palatino, serif;  /* font-size = 130% of 16px = 20.8px */
}

/* so,
total width = 83.2px + (24.96px * 2) = 133.12px (50% = 66.56px)
total height = 83.2px + (20.8px * 2) = 124.8px (50% = 62.4px)
*/

div:nth-of-type(2) {
  background-size: 67px 63px;
}
div:nth-of-type(3) {
  background-size: 66px 62px;
}

div{
  display: inline-block;
  margin: 10px;
}

<div></div>
<div></div>
<div></div>

Note: I've been wanting to post a self Q & A for documenting this behavior for quite sometime now, so thank you for asking :)

Chrome 在渲染多个渐变时在中间留下白色 space/gap

Chrome leaves white space/gap in between when rendering multiple gradients

css

google-chrome

linear-gradients

radial-gradients