我用Angular写了一个网页，现在一些CSS代码似乎产生了不同的结果：
CSS：

.storypane {
    display: flex;
    width: 15vw;
    height: 20vh;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 1vh;
    min-width: 20em;
    overflow: hidden;
    cursor: pointer;
}

.storypane > .cover {
    position: relative;
    background-color: blue;
}

在Chrome浏览器上：

在Safari上：

完整CSS文件：

.storylist {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-basis: 100%;
    row-gap: 2vh;
    column-gap: 2vw;
    margin: 2vh;
}

.storypane {
    display: flex;
    width: 15vw;
    height: 20vh;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 1vh;
    min-width: 20em;
    overflow: hidden;
    cursor: pointer;
}

.storypane > .cover {
    position: relative;
    background-color: blue;
}

.storypane:hover{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 20px;
}

.storypane:active{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 20px;
}

.storypane > .content {
    margin: .1vh;
    min-width: auto;
}

.storypane > .content > .details{
    margin: 1vh;
    min-width: auto;
}

.storypane > .cover > mat-icon {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    bottom: 50%;
    color: white;
    font-size: 7vh;
    height: 7vh ;
    width: 7vh;
    opacity: 70%;
    display: none;
}

.storypane:hover:not(.playing) > .cover > .play-icon {
    display: block;
}

.storypane:active:not(.playing) > .cover > .play-icon {
    display: block;
}

.storypane > .cover > img{
    max-height: 100%;
    min-height: 100%;
    max-width: none;
    float: left;
    border-radius: 1vh 0 0 1vh;
    display: block;
}

.storylist .playing {
    box-shadow: rgba(0, 182, 112, 0.61) 0px 5px 15px;
    animation: mymove 5s infinite;
}

@keyframes mymove {
    50% {box-shadow: rgb(0, 214, 132) 0px 5px 15px;}
}

.playing > .cover > .play-icon {
    display: none;
}

.playing > .cover > .pause-icon {
    display: block;
    opacity: 80%;
}

.storypane:hover .playing > .cover > .pause-icon {
    opacity: 100%;
}

.title {
    font-weight: 500;
    min-width: 100%;
}

.details {
    position: relative;
    height: 100%;
}

.meta {
    position: absolute;
    bottom: 5%;
    vertical-align: middle;
    opacity: 70%;
    font-weight: 500;
    font-size: 9pt;
    white-space: nowrap;
}

.meta > span > mat-icon {
    vertical-align: middle;
    font-size: 13pt;
    height: 15pt;
    width: 13pt;
}

全Angular HTML文件：

<mat-tab-group>
  <mat-tab label="Geschichten">
    <div class="storylist">
      <div
        *ngFor="let story of stories | filter: { type: 'STORY' }"
        class="storypane"
        [ngClass]="isPlaying(story) ? 'playing' : ''"
      >
        <div class="cover" (click)="playStory($event, story)">
          <img src="{{ story.cover }}" />
          <mat-icon mat-list-icon class="play-icon"
            >play_circle_outline</mat-icon
          >
          <mat-icon mat-list-icon class="pause-icon"
            >pause_circle_outline</mat-icon
          >
        </div>
        <div class="content">
          <div class="details">
            <span class="title">{{ story.title }}</span>
            <div class="meta">
              <span>
                <mat-icon mat-list-icon>insert_invitation</mat-icon>
                {{ story.releasedAt | date: "dd.MM.yyyy" }}
              </span>
              <span class="duration">
                <mat-icon mat-list-icon>equalizer</mat-icon>
                {{ story.duration }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </mat-tab>
  <ng-template [ngIf]="isCalenderActive()">
    <mat-tab label="Adventskalender">
      <div class="storylist">
        <div
          *ngFor="let story of stories | filter: { type: 'CSTORY22' }"
          class="storypane"
          [ngClass]="isPlaying(story) ? 'playing' : ''"
        >
          <div class="cover" (click)="playStory($event, story)">
            <img src="{{ story.cover }}" />
            <mat-icon mat-list-icon class="play-icon"
              >play_circle_outline</mat-icon
            >
            <mat-icon mat-list-icon class="pause-icon"
              >pause_circle_outline</mat-icon
            >
          </div>
          <div class="content">
            <div class="details">
              <span class="title">{{ story.title }}</span>
              <div class="meta">
                <span>
                  <mat-icon mat-list-icon>insert_invitation</mat-icon>
                  {{ story.releasedAt | date: "dd.MM.yyyy" }}
                </span>
                <span class="duration">
                  <mat-icon mat-list-icon>equalizer</mat-icon>
                  {{ story.duration }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </mat-tab>
  </ng-template>
</mat-tab-group>

我试图在所有设备上的两个浏览器上生成相同的结果。是否有一种方法可以翻译这些CSS文件，使所有浏览器以相同的方式理解它？