使用固定背景渐变滚动Div的元素

Question

我有一个滚动div，其元素具有固定的背景渐变。

HTML

<div id="wrapper">
  <div id="header">
    Header
  </div>
  <div id="body">
    <ul>
      <li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
    </ul>
  </div>
  <div id="footer">
    Footer
  </div>
</div>

CSS

#wrapper {
  display: flex;
  flex-direction: column;
  height: 90vh;
}
#header {
  flex: 0 0 50px;
  background: cornflowerblue;
}
#body {
  flex: 1 1 auto;
  overflow-y: scroll;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  margin: 10px;
  background: linear-gradient(to bottom, red, purple) fixed;
  padding: 10px;
  border-radius: 10px;
  width: 100px;
}

#footer {
  flex: 0 0 50px;
  background: lightgreen;
}

codepen在这里：

https://codepen.io/swards/pen/XavVpz

这似乎是webkit的一个错误，因为这非常简单并适用于Safari。有人有解决方法吗？