Safari 浏览器中 CSS 不透明度的不同显示

Question

我正在 Ionic-Framework 中为移动设备开发一个混合应用程序。我尝试使某些 HTML 跨度对于定义的区域在一定程度上看起来透明。HTML 和 CSS 在每台 Android 设备上都能正常工作，但在每台 Apple 设备上显示却毫无用处。这意味着阴影不透明度和相关的 HTML 元素每次都会突然显示在视图中完全不同的位置。不透明度有时会影响整个页面。当我从视图中删除相关的 HTML 时，一切都很好，这让我怀疑 safari 无法按照我想要的方式解释我的代码。

我怀疑是 safari bug 或某些 safari 怪癖造成了这种奇怪的显示。

这里它是如何正确的并且在 Android 设备上看起来像这样：https://ibb.co/diNxxw 这里它是如何在每个 iOS 设备上崩溃的：https: //ibb.co/eNfZcw https://ibb.co/jiPGqG

这是我的 HTML

<ion-item>
                <ion-label class="label-left-filler" [ngStyle]="{'width': avgRatings[speise.id]?.ratingAverage ? (((avgRatings[speise.id]?.ratingAverage | roundDecimal : avgRatings[speise.id]?.ratingAverage)-1) * (25+5) +13) +'px' : 0 +'px' }">
                </ion-label>
                <ion-label class="label-rating">
                  <span class="span-rating">
                    <span class="span-emojicon">
                      <mat-icon class="mat-icon-one">sentiment_very_dissatisfied</mat-icon>
                      <span class='mat-icon-spacer'></span>
                      <mat-icon class="mat-icon-two">sentiment_dissatisfied</mat-icon>
                      <span class='mat-icon-spacer'></span>
                      <mat-icon class="mat-icon-three">sentiment_neutral</mat-icon>
                      <span class='mat-icon-spacer'></span>
                      <mat-icon class="mat-icon-four">sentiment_satisfied</mat-icon>
                      <span class='mat-icosxn-spacer'></span>
                      <mat-icon class="mat-icon-five">sentiment_very_satisfied</mat-icon>
                    </span>
                  </span>
                </ion-label>
                <ion-label class="label-right-filler" [ngStyle]="{'margin-left': avgRatings[speise.id]?.ratingAverage ? (avgRatings[speise.id]?.ratingAverage | roundDecimal : avgRatings[speise.id]?.ratingAverage) * (25+5) -3 +'px' : 0 +'px' }">
                </ion-label>
              </ion-item>

这是我对应的CSS

  .label-rating {
    position: fixed;
    padding-left: 15px;
    top: 0px;
    left: 0px;
    background: rgba(255, 255, 255, 0);
    z-index: 1;
  }
  .label-left-filler {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2;
  }
  .label-right-filler {
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2;
  }
  .mat-icon-one {
    background: radial-gradient(
      red $mat-icon-radial-gradient-inner,
      white $mat-icon-radial-gradient-outer
    );
  }
  span > .mat-icon {
    font-size: $mat-icon-font-size;
    width: $mat-icon-width;
    height: $mat-icon-height;
    color: rgb(0, 0, 0);
    -webkit-mask-size: cover;
  }
  h2 span.mat-icon-spacer {
    padding: 0 $mat-icon-spacer-padding;
    background: white;
  }

Answer 1

为了更加跨浏览器友好，您可以使用不透明度元素，并使用特定于浏览器的设置来提高兼容性。

opacity: 0.5; /* Standard compliant browsers */
   -moz-opacity: 0.5; /* Firefox and Mozilla browsers */
   -webkit-opacity: 0.5; /* WebKit browser e.g. Safari */
   filter: alpha(opacity=50); /* For IE8 and earlier */