es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Gradiente lineal de Safari

26 Jul, 2023 Programación

Tengo un problema al usar linear-gradient en Safari 15.2.

Quiero crear un bloque con un efecto de desvanecimiento al final si los hijos no caben.

He creado un ejemplo: https://codepen.io/serejich/pen/xxXLvEG.

Código:
“`

Elemento 1
Elemento 2
Elemento 3
  • {
    margin: 0;
    }

.gradient-container {
background-color: coral;
width: 200px;
height: 30px;
position: relative;
display: flex;
align-items: center;
}

.elements {
padding: 0 10px;
display: flex;
column-gap: 10px;
overflow-x: hidden;
}

.elements p {
color: #fff;
white-space: nowrap;
}

.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) calc(100% – 50px), coral);
}

Si abres esto en Safari, habrá algo así como un área blanca en el lado derecho del bloque.

¿Qué causa esto y hay alguna forma de solucionarlo?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece ser un problema conocido con la propiedad linear-gradient en Safari, donde no siempre se renderiza correctamente al usar calc() para la posición de parada del color.

    Una posible solución podría ser usar transform: translateX(-50px) en el elemento .gradient en lugar de usar calc() en la propiedad linear-gradient. Esto desplazaría el gradiente hacia la izquierda en 50px y lograría el mismo efecto sin el área blanca a la derecha.

    Aquí tienes un fragmento de código actualizado con la solución sugerida:

    <div class="gradient-container">   
  <div class="elements">
    Elemento 1
    Elemento 2
    Elemento 3
  </div>
  <div class="gradient"></div>
</div>

* {
  margin: 0;
}

.gradient-container {
  background-color: coral;
  width: 200px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
}

.elements {
  padding: 0 10px;
  display: flex;
  column-gap: 10px;
  overflow-x: hidden;
}

.elements p {
  color: #fff;
  white-space: nowrap;
}

.gradient {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), coral);
}

    ¡Espero que esto ayude!

Comments are closed.