FIX: Workaround `box-shadow` and `box-radius` bug on safari.

app/assets/javascripts/discourse/widgets/header.js.es6

@@ -45,6 +45,7 @@ createWidget('header-notifications', {
       if (!currentUser.get('read_first_notification')) {
         contents.push(h('span.ring'));
         if (!attrs.active && attrs.ringBackdrop) {
+          contents.push(h('span.ring-backdrop-spotlight'));
           contents.push(h('span.ring-backdrop',
             {},
             h('h1.ring-first-notification', {} ,I18n.t('user.first_notification'))

app/assets/stylesheets/common/base/discourse.scss

@@ -166,13 +166,23 @@ body {
   &.badge-notification[href] {color: $secondary;}
 }
 
+.ring-backdrop-spotlight {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  top: -18px;
+  right: -18px;
+  background-image: radial-gradient(40px at 50% 50% , transparent 95%, $primary 100%);
+  opacity: 0.85;
+}
+
 .ring-backdrop {
+  position: absolute;
   width: 80px;
   height: 80px;
   top: -18px !important;
   right: -18px !important;
-  box-shadow: 0 0 0 2000px rgba($primary, 0.85);
-  border-radius: 100%;
+  box-shadow: 0 0 0 9999px rgba($primary, 0.85);
   z-index: 1040;
 }
 
@@ -180,9 +190,9 @@ body {
   position: absolute;
   color: $secondary;
   text-align: left;
-  right: 60px;
+  right: 70px;
   top: 60px;
-  width: 250px;
+  width: 230px;
   line-height: 30px;
 }
 

app/assets/stylesheets/common/base/header.scss

@@ -123,7 +123,7 @@
       .notifications {
         position: relative;
       }
-      .badge-notification, .ring, .ring-backdrop {
+      .badge-notification, .ring {
         position: absolute;
         top: -9px;
         z-index: 1;
@@ -133,7 +133,7 @@
         right: 0;
         background-color: scale-color($tertiary, $lightness: 50%);
       }
-      .unread-private-messages, .ring, .ring-backdrop {
+      .unread-private-messages, .ring {
         right: 25px;
       }
       .flagged-posts {