Div 在 safari 浏览器中带有框阴影插图的部分显示为黑色

Question

我正在构建一个 div 背景，该背景适用于除 Safari 以外的所有浏览器，在 Safari 中它显示为黑色。

已在Angular中搭建应用，代码如下

// HTML
<div class="card" [style.backgroundImage]="'url('myBlob/img/' + data.destination.code.toLowerCase() + '.jpg)'" *ngIf="data.price >= 0">
    <p class="city-info">
        <span class="city-name">{{ data.destination.city }}</span>
        <span class="country-name">{{ data.destination.country }}</span>
    </p>
    <p class="city-price">{{ data.price | number:'1.0-0' }}€</p>
</div>

// CSS
background-color: #DDD;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    height: 210px;
    position: relative;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(32, 33, 36, 0.25), inset 0px -240px 120px -80px rgba(0, 0, 0, 0.25);
    transition: all 0.22s cubic-bezier(.2, .08, .6, .99);
    width: 100%;

图片为 jpg 格式，尺寸约为 500px-700px

演示 stackblitz.com/edit/angular-ivy-6rvfgt

Answer 1

问题出在负框阴影插图扩展中

我通过更改以下内容解决了它：

box-shadow: 0 3px 6px rgba(32, 33, 36, 0.25), inset 0px -240px 120px **-80px** rgba(0, 0, 0, 0.25);

for

box-shadow: 0px 3px 6px 0px rgba(32, 33, 36, 0.25), inset 0px -240px 120px 0px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 3px 6px 0px rgba(32, 33, 36, 0.25), inset 0px -240px 120px 0px rgba(0, 0, 0, 0.25);

效果不会一样，但是Safari不喜欢

Div 在 safari 浏览器中带有框阴影插图的部分显示为黑色

Div with box-shadow inset appears with black half in safari browser

css

safari

mobile-safari

angular