Desbordamiento: oculto con radio de borde que no funciona en Safari

Question 1

Tengo que hacer un botón con un ::before oculto que se muestra en :hover. Esta animación funciona muy bien en Chrome, IE y Firefox, pero tengo un problema extraño en Safari.

Overflow:hidden funciona pero sin el radio del borde.

Debe ejecutar el violín en safari para ver este problema.

Gracias !

.btn{
  border-radius: 3rem;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  font-family: arial;
  overflow: hidden;
  position: relative;
  padding: 0.8rem 2.5rem;
  text-decoration: none;
  }

.btn-primary{
  background-color: blue;
  border-color: blue;
  color: white;
}

.btn-primary::before{
  background-color: deeppink;
  border-radius: 50%;
  content: '';
  color: white;
  height: 100%;
  left: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  transform-origin: 100% 50%;
  transform: scale3d(1, 1.4, 1);
  transition: all 300ms cubic-bezier(0.7,0,0.9,1);
  width: 20%;
}

.btn-primary:hover::before{
  transform: scale3d(1, 5, 1);
  width: 110%;
  left: -2%;
  z-index: 0;
}

.btn-primary span{
  position: relative;
  z-index: 1;
}

<a href="#" class="btn btn-primary">
  <span>Button primary</span>
</a>

Question 2

La respuesta aceptada funciona, pero de hecho elimina la sombra del cuadro. Un comentario que vi en este publicación de github dice que también se puede solucionar creando un nuevo contexto de apilamiento (una especie de mover un elemento a una nueva capa de pintura). Eso se puede lograr con un pequeño truco como

transform: translateZ(0)

En mi caso, tanto overflow como box-shadow funcionan con esta solución. Espero que ayude a alguien más también.

UPD: tal como sugirió Jad Haidar en los comentarios isolation es una propiedad específicamente para trabajar con el contexto de apilamiento:

isolation: isolate;

Question 3

Así que encontré un pequeño truco para solucionar este problema en https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b

Simplemente agregue esta línea a su elemento con desbordamiento:

-webkit-mask-image: -webkit-radial-gradient(white, black);

Avíseme si alguien encuentra otra solución 🙂

.btn{

  /* Add this line */
  -webkit-mask-image: -webkit-radial-gradient(white, black);

  border-radius: 3rem;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  font-family: arial;
  overflow: hidden;
  position: relative;
  padding: 0.8rem 2.5rem;
  text-decoration: none;
  }

.btn-primary{
  background-color: blue;
  border-color: blue;
  color: white;
}

.btn-primary::before{
  background-color: deeppink;
  border-radius: 50%;
  content: '';
  color: white;
  height: 100%;
  left: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  transform-origin: 100% 50%;
  transform: scale3d(1, 1.4, 1);
  transition: all 300ms cubic-bezier(0.7,0,0.9,1);
  width: 20%;
}

.btn-primary:hover::before{
  transform: scale3d(1, 5, 1);
  width: 110%;
  left: -2%;
  z-index: 0;
}

.btn-primary span{
  position: relative;
  z-index: 1;
}

<a href="#" class="btn btn-primary">
  <span>Button primary</span>
</a>

Question 4

will-change: transform; en elemento con overflow: hidden; problema resuelto para mí

Question 5

Esto se debe a uno de varios errores no resueltos en WebKit, el motor de renderizado utilizado por Safari:

El recorte del radio del borde del descendiente compuesto no apilable no funciona
desbordamiento: oculto + radio de borde no funciona cuando se agrega transformación al niño

Como escribe Simon Fraser en el segundo enlace:

Puede solucionarlo en compilaciones recientes haciendo que el elemento con desbordamiento: oculto en un contexto de apilamiento (por ejemplo, posición: relativa, índice z: 0).

Esta es probablemente la solución más simple ya que, a diferencia de algunas de las otras respuestas aquí, no innecesariamente introducir capas de renderizado.

Question 6

Para mí, agregar un alto z-index ajuste al elemento con el border-radiusfue suficiente para solucionar el problema.

¿Ha sido útil esta solución?