backface-visibility 属性在存在内嵌元素时显示错误

AI助手支持GPT4.0

// wxml<view class="card-wrapper {{ status ? 'show-cover' : '' }}">  <view class="cover-image">    <image class="card-image" src="{{ coverImage }}" />    <text class="card-text">{{ text }}</text>  </view>  <view class="back-image">    <image class="card-image" src="{{ backImage }}"></image>    <text class="card-text">{{ text }}</text>  </view></view>// wxss.card-wrapper {  width: 100%;  height: 100%;  position: relative;  transform-style: preserve-3d;}.card-wrapper.show-cover {  transform: rotateY(180deg);}.cover-image,.back-image {  width: 100%;  height: 100%;  position: absolute;  left: 0;  top: 0;  backface-visibility: hidden;}.cover-image {  transform: rotateY(180deg);  transform-origin: center;}/* .back-image {  backface-visibility: hidden;} */.card-image {  width: 100%;  height: 100%;}.card-text {  display: block;  width: 100%;  line-height: 1;  margin-top: -120rpx;  text-align: center;  color: white;  font-size: 36rpx;  text-shadow:1px 2px 4px rgba(27,95,168,0.6);}.back-image .card-text {  opacity: 0.4;  margin-top: -128rpx;}

Framework type problem type terminal type wechat version basic library version applet bug wechat Android client 7.0.17 2.9.0 card front and back requirements. The equivalent code has no problem in chrome, but it has problems in applet development tools and Android. (IOS not tested) specific problem: if the front and back of the card are just pictures, the front and back display is OK. If the front and back of the card are containers, there are pictures and text inside. The card is turned over and the words on the front and back are displayed. Only one side of the text is expected to be displayed. / / wxml          {{ text }}            {{ text }}  // wxss.card -wrapper {  width: 100%;  height: 100%;  position: relative;  transform-style: preserve-3d;}.card- wrapper.show -cover {  transform: rotateY(180deg);}.cover-image,.back-image {  width: 100%;  height: 100%;  position: absolute;  left: 0;  top: 0;   backface-visibility: hidden;}.cover-image {  transform: rotateY(180deg);  transform-origin: center;}/* .back-image {  backface-visibility: hidden;} */.card-image {  width: 100%;  height: 100%;}.card-text {  display: block;  width: 100%;  line-height: 1;  margin-top: -120rpx;  text-align: center;   color: white;  font-size: 36rpx;  text- shadow:1px  2px 4px rgba(27,95,168,0.6);}.back-image .card-text {  opacity: 0.4;  margin-top: -128rpx;}

回答：