calc в линейном градиенте не работает в IE/Edge

Question

IE и Edge, похоже, не могут правильно вычислить высоту в этом градиенте. у кого-нибудь есть решение?

background: linear-gradient(180deg, rgba(255,255,255,0) 100px, #f5f5f5 100px, #f5f5f5 calc(100% - 100px), rgba(255,255,255,0) calc(100% - 100px)); 

Answer 1

В этом случае, как вы используете прозрачную «полоску», вы можете обмануть с помощью два линейных градиентов как только будет 50% от высоты.

Вы начинаете один из верхней и второй из нижней

div { 
 
    height: 100vh; 
 
    background: 
 
    linear-gradient(180deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%), 
 
    linear-gradient(0deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%); 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: pink; /* for demo purposes */ 
 
}

<div></div>

Codepen Demo