Estoy usando gradientes radiales en un nuevo sitio que estoy construyendo, pero los colores se muestran de manera diferente (mucho más oscuro) en Safari en el escritorio. ¿Hay una mejor sintaxis entre navegadores para usar?

He probado diferentes prefijos, pero esto no ha solucionado el problema. El código que estoy usando es el siguiente.

.item1 {
  background: -webkit-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -webkit-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: -o-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -o-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

La salida correcta como se ve actualmente en Chrome y Firefox:https: //imgur.com/a/fMJCbZ

La salida dentro de Safari:https: //imgur.com/a/KwwiV1

Como puedes ver, es mucho más oscuro en Safari.

Alguien tiene alguna idea sobre cómo solucionarlo?