适用于Mac OS的Chrome中的模糊椭圆

Question

我一直在尝试使用html＆amp; css创建一个具有巨大重叠椭圆形状的背景图形。

问题：在 Chrome 中，一个巨大的椭圆 - 如下图所示 - 在其顶部附近会出现模糊。

它看起来只在Mac OS上发生，而在我的Windows PC上却不会发生

在Safari和Firefox中看起来很不错。

Chrome（mac）

Safari浏览器

.ellipse {
    width: 30%;
    padding-top: 540%;
    background: red;
    border-radius: 50%;
}

<div class="ellipse"></div>

任何猜测，我怎样才能让它在Chrome中看起来很清晰？