在模拟器上正常显示，但是在 iOS 真机上有问题。没用native-component。什么原因？

第一张是模拟器上的效果，第二张是iOS真机效果，文字没显示出来。真机vConsole 上看wxml结构，内容是存在的。以下是wxml代码和css代码。

<view class="benefits-badge-wrapper">

<block wx:for="{{benefits}}" wx:for-item="benefit" wx:key="{{id}}">

<view class="benefit-badge" style="z-index:{{10-index}};">{{benefit.name}}</view>

</block>

</view>

.benefits-badge-wrapper {

display: flex;

position: absolute;

top: 0;

/*right: 0;*/

}

.benefits-badge-wrapper .benefit-badge {

color: white;

padding: 0 30rpx 6rpx;

position: relative;

z-index: 10;

font-size: 28rpx;

}

.benefit-badge::before {

content: '';

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: -30rpx;

z-index: -1;

border-radius: 0 0 15rpx 15rpx;

box-shadow: 2rpx 2rpx 10rpx 0 rgba(0,0,0,0.20);

transform: scaleY(1.3) perspective(10rpx) rotateX(-5deg);

transform-origin: bottom;

background: #F7B500;

}

js 文件里面除了提供data，没有任何代码。不知道是不是小程序对于 iOS 的 css 兼容有问题？或者说需要什么特殊处理？求官方人员解答

在模拟器上正常显示，但是在 iOS 真机上有问题。 没用native-component。什么原因？