<div class="audio-brief-main" > <div class="audio-brief-img-outer"><img class="audio-brief-img" /></div> <div class="audio-brief-word"> <p class="p1">{{brief.name}}</p> </div> </div> <div class="audio-brief-box-bg"><div :style="'background:url('+brief.image+'); background-size:100% 100%; position:relative; z-index:0; filter:blur(30px)'"></div><div class="overlayer"></div></div>Copy the code

The truth is that audio-brief-main and audio-brief-box-bg are themselves fixed elements. When rotating to landscape, change to Absolute; When the ios phone tests the vertical and horizontal rotation, it finds that audio-brief-box-bg blocks the upper audio-brief-img-outer, but audio-brief-word can display it again.

Finally, add audio-brief-main, position:relative; z-index:9999999; Problem solved!

.audio-brief-main{ width:100%; display:flex; align-items:center; position: relative; z-index: 999999999999; } @media screen and (orientation:landscape) { .audio-brief-box { position: absolute; z-index: 1; } .audio-brief-box-bg { position:absolute; z-index: 0; }}Copy the code