无法在 Safari 中相对于底部定位 CSS 渐变

Question

我有一个具有重复径向渐变背景的元素 (https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient)。

CSS规则如下：

background-image: repeating-radial-gradient(
                    farthest-corner circle at left 100px bottom 329px,
                    rgba(255,255,255,.2),
                    rgba(255,255,255,.6) 1px,
                    rgba(255,255,255,.6) 3px,
                    rgba(255,255,255,.2) 4px,
                    rgba(255,255,255,.2) 18px
                );

这似乎适用于除 SAFARI（甚至 IE！）以外的所有浏览器。

Safari 似乎在相对于底部定位渐变时遇到问题。这条线工作正常，但相对于左侧，顶部定位渐变：

background-image: repeating-radial-gradient(
                    farthest-corner circle at 100px 329px,
                    rgba(255,255,255,.2),
                    rgba(255,255,255,.6) 1px,
                    rgba(255,255,255,.6) 3px,
                    rgba(255,255,255,.2) 4px,
                    rgba(255,255,255,.2) 18px
                );

请注意排除了 "left" 和 "bottom" 关键字。

我在 Safari 中似乎也有这个问题，无论是否重复。

这是一个 jsfiddle：http://jsfiddle.net/nappels/ods8s2c0/

Answer 1

这是我刚提出的问题的一个答案：

您可以使用 css calc() 函数通过 calc(100% - 329px) 相对于元素的底部定位元素。这相当于将元素定位到相对于其底部 329px 的位置。

所以在我的问题的上下文中，新的代码片段将如下所示：

background-image: repeating-radial-gradient(
                farthest-corner circle at 100px calc(100% - 329px),
                rgba(255,255,255,.2),
                rgba(255,255,255,.6) 1px,
                rgba(255,255,255,.6) 3px,
                rgba(255,255,255,.2) 4px,
                rgba(255,255,255,.2) 18px
            );

Calc 现在有很好的支持 (http://caniuse.com/#feat=calc)。无论如何，IE 9 及以下版本将需要径向渐变的回退。

无法在 Safari 中相对于底部定位 CSS 渐变

Can't position a CSS gradient relative to the bottom in Safari

css

safari

gradient

radial-gradients