SafariブラウザでのCSSの不透明度の表示が異なります

Question

Ionic-Frameworkのモバイルデバイス用のハイブリッドアプリケーションで作業しています。 私はいくつかのHTMLスパンを定義された領域に対してある程度透明に見せようとします。 HTMLとCSSはすべてのアンドロイドデバイスでうまく動作しますが、すべてのAppleデバイスでひどく役に立たなくなっています。つまり、不透明な不透明度と関連するHTML要素が突然、ビューの完全な別の場所に表示されます。不透明度は、ページ全体に影響することがあります。私がビューから関連するHTMLを削除すると、疑念のサファリにつながるすべての問題は、私が望むように私のコードを解釈できません。

私は、サファリの不具合や、奇妙な表示の原因となるサファリの疑いがあると思われます。 https://ibb.co/diNxxw そして、ここでそのは、すべてのiOSデバイス上で墜落した方法：https://ibb.co/eNfZcwhttps://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> 

そして、これが私の対応されているここで、それは正しいとAndroidデバイス上でどのように見えるか

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

より多くのブラウザをまたがるようにするには、opブラウザ固有の設定を使用して互換性を高めることができます。

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 */