Lors de la combinaison d'un vertical-gradient et d'une box-shadow sur un élément vertical centré, il affiche une ligne blanche entre l'élément et l'ombre (à certaines tailles).
Pour pouvoir montrer le problème, l'extrait de code force une taille à l'endroit où ce problème se produit, dans l'exemple du cas réel, la hauteur est mise à l'échelle avec la fenêtre.
Ce problème se produit sur la version 71.0.3578.98 de Chrome ( Safari rend bien, n'a testé aucun autre navigateur).
Existe-t-il des solutions de contournement qui pourraient résoudre ce problème en dehors de la suppression du dégradé?
<div class="center"> <div class="box"></div> <div class="box box--grad"></div> </div>
.center {
height: 96px;
display: inline-flex;
}
.box {
width: 50px;
height: 61%;
margin: auto 0;
margin-right: 5px;
background-color: blue;
box-shadow: navy 0 20px 0;
}
.box--grad {
background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
}
3 Réponses :
L'application d'une règle background-position-y: -1px; au dégradé semble résoudre le problème, sans avoir d'effet négatif sur les autres navigateurs (testé sur Firefox).
<div class="center"> <div class="box"></div> <div class="box box--grad"></div> </div>
.center {
height: 96px;
display: inline-flex;
}
.box {
width: 50px;
height: 61%;
margin: auto 0;
margin-right: 5px;
background-color: blue;
box-shadow: navy 0 20px 0;
}
.box--grad {
background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
background-position-y: -1px;
}
vous pourriez peut-être utiliser un
: après
<div class="content"> <div class="box box-shadow1"></div> <div class="box box-shadow2"></div> </div>
.content{
height: 96px;
display: inline-flex;
position: relative;
}
.box {
width: 50px;
margin: 0 20px;
}
.box-shadow1{
background: radial-gradient(circle at top, #00448b 60%, #6dfff1 150%);}
.box-shadow2{
background: radial-gradient(circle at top, #ffec04 , #f48f11 );}
.box-shadow1:after {
width: 50px;
height: 100%;
content: '';
position: absolute;
bottom: 0;
z-index: -1;
box-shadow: 0px 0px 47px 0px #29adec;
}
.box-shadow2:after {
width: 50px;
height: 20px;
content: '';
position: absolute;
bottom: 0;
box-shadow: 0px 0px 20px 0px #a67300;
}
Vous pouvez augmenter légèrement la background-size:
<div class="center"> <div class="box"></div> <div class="box box--grad"></div> </div>
.center {
height: 96px;
display: inline-flex;
}
.box {
width: 50px;
height: 61%;
margin: auto 0;
margin-right: 5px;
background-color: blue;
box-shadow: navy 0 20px 0;
}
.box--grad {
background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%) bottom;
}
Ou ajustez la position de l'arrière-plan vers le bas (au cas où l'ombre serait toujours appliquée en bas)
<div class="center"> <div class="box"></div> <div class="box box--grad"></div> </div>
.center {
height: 96px;
display: inline-flex;
}
.box {
width: 50px;
height: 61%;
margin: auto 0;
margin-right: 5px;
background-color: blue;
box-shadow: navy 0 20px 0;
}
.box--grad {
background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
background-size:100% calc(100% + 1px);
}
Merci d'avoir pris le temps de proposer des solutions alternatives. La vérité est que les deux solutions fonctionnent sur l'exemple fourni, mais une raison pour laquelle je ne peux pas entièrement comprendre qu'elle ne fonctionne pas sur mon application actuelle. L'ajustement de background-position-y fonctionne cependant. Je pourrais aussi le faire fonctionner avec background-size: 100% calc (100% + 2px) , et positionner l'arrière-plan en bas sans effet. Mon problème semble, en effet, très sommaire.
@ a - m pouvez-vous partager plus de code lié à votre application? nous pouvons trouver plus d'alternatives. Les dégradés sont très délicats et chaque situation est en quelque sorte unique.
Je pensais avoir mis tout le code pertinent, et il m'a fallu un certain temps pour reproduire le problème sur un extrait de code, mais il semble que ce que j'ai fait n'était pas suffisant, alors je vais y revenir quand j'en aurai quelques temps. Je vous remercie.