CODEWITHSUNDEEP
csssafari
gvfordo
gvfordo

Reputation: 189

Border Radius and Large Spread Drop Shadow in Safari

I ran into an issue today with Safari (Version 11.0 (12604.1.38.1.7), border-radius, and a large spread drop shadow. This issue doesn't happen in Chrome, FF, or Edge.

The reason for the large drop shadow is to achieve a window like effect where element is visible, and the drop shadow is semi-transparent covering the whole screen.

After some trouble shooting I determined that drop-shadow works fine in Safari, but not when the spread is very large (like here) AND when the border radius of the container all match. Adjust one corner border radius to be one pixel different, and the issue goes away and the drop shadow spread works at the sizes I want.

Here's a quick and dirty CodePen demonstrating the issue.
The button will toggle the equal vs. non-equal border radius class. But feel free to adjust the box-shadow size and note that it works fine up to a certain point (2039px works, 2040px doesn't. This was slightly different from the breaking point I founder earlier in my own code which was ~2019).

I guess I have to paste code from CodePen here too.

HTML

<div class='wrapper'>
  <div id='box-shadow-container' class="equal-border-radius">
    <div id='box-shadow-fun'> 
    What's going on here? <br/><br/>
    <button id='toggle-radius-class'> Swap Border Radius Class</button>
  </div>
  </div>
</div>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.wrapper {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box-shadow-fun {
  padding: 5px;
}

#box-shadow-container {
  border: 1px solid #CCC;
  box-shadow: 0 0 0 5000px black;
}

.one-different-border-radius {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 4px;
}

.equal-border-radius {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

Does anyone know the issue here? I can live with one corner being a pixel radius different, but I don't like not understanding a bug fix as it seems likely to break in the future and I'll still have no idea what's going on.

Upvotes: 2

Views: 1347

Answers (2)

andrewh
andrewh

Reputation: 344

I don't know the cause of the issue but you can fix it without making one of the border radius different by using calc:

.thing-with-box-shadow {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    border-radius: 50%;

    // makes the box shadow appear on Safari
    border-bottom-right-radius: calc(50% + 0px);
}

Upvotes: 0

Decade Moon
Decade Moon

Reputation: 34286

I don't know what's going on with the unequal border radii, but it seems that Safari doesn't handle very large box shadows well and will refuse to draw it if the spread is too large with a border radius. It does work if you also set a small blur radius (which shouldn't be noticeable except at the very extremes of the shadow):

#box-shadow-container {
  box-shadow: 0 0 500px 5000px black;
                  ^^^^^
}

However this will break Firefox. You should detect the Safari browser and only apply this style in Safari.

Play around with the blur radius and spread values to get something that works at the smallest size that you require.

Upvotes: 2

Related Questions