Chrome：白色背景上的透明白色不是白色

Question

我注意到有关白色叠加的铬的奇怪之处。 我有一个白色背景（#ffffff），上面有一个白色叠加（也是#ffffff），不透明度为0.8。

这是css：

.story {
   position: relative;
   display: inline-block;
   background: white;
   width: 300px;
   height: 320px;
   font-size: 12pt; 
}

.story-cover {
   position: relative;
   width: 100%;
   height: 50%;
   background: no-repeat center;
   background-size: cover;
}

.story-content {
   position: absolute;
   width: 100%;
   height: 65%;
   bottom: 0;
   z-index: 10;
}

.story-content::before {
   position: absolute;
   content: "";
   display: block;
   background: rgba(255, 255, 255, 0.8);
   width: 100%;
   height: 100%;
}

结果如下：

很难注意到所以我增强了红色方块内的水平。 右边是纯白色#ffffff，左边是#fefefe，根据photoshop。

值得注意的是，这是一个chrome问题，firefox让一切都很好。

是否有Chrome渲染专家可以澄清发生了什么？

编辑：我创建了Codepen，有助于说明问题。