Search code examples
csssafarigradientradial-gradients

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

I have an element with a repeating radial gradient background (https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient).

The CSS rule is as follows:

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
                );

This seems to work in all browsers except SAFARI (even IE!).

Safari seems to be having an issue with positioning the gradient relative to the bottom. This line works fine, but positions the gradient relative to the left, top:

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
                );

Notice the exclusion of the "left" and "bottom" keywords.

I also seem to have this issue in Safari with any gradient, repeating or not.

Here is a jsfiddle: http://jsfiddle.net/nappels/ods8s2c0/

Solution

  • Here's one answer to my own question I just came up with:

    You can use the css calc() function to position an element relative to its bottom by doing calc(100% - 329px). This is the equivalent of positioning an element 329px relative to its bottom.

    So in the context of my question, the new code snippet will look like this:

    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 has pretty good support right now (http://caniuse.com/#feat=calc). IE 9 and below will require a fallback for radial gradient anyway.