iOS 11浏览器图像错误 [英] iOS 11 browsers image bug

问题描述

滚动页面时，我在iOS 11中遇到以下错误.(在Firefox，Safari和Chrome中).在Android设备中不会发生错误.

I'm getting the following error in iOS 11 when scrolling through the page. (In Firefox, Safari and Chrome). In Android devices the error is not happening.

这些是背景图片，我不知道这是否可能是导致错误的原因.

These are background images, I don't know if that could be the reason that's causing the error.

图片2显示了图片的意图和在Android中的显示方式.

Image 2 shows how the image is intended and shown in Android.

<div
  className="shelf-page-lists-icons-background"
  style={containerImage}
/>
<div
  style={styles.container}
>
  <p style={styles.listsTitle}>{list.title}</p>
</div>


  CSS 

  containerImage = {
    backgroundImage: url(${list.image}),
    backgroundSize: 'cover',
    height: 150,
    borderRadius: 4,
    position: 'absolute',
    width: imageWidth,
    overflow: 'hidden',
  }

  container: {
    height: 150,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-end',
    marginBottom: 10,
    padding: '0px 40px 13px 16px',
  },


  .shelf-page-lists-icons-background {
    opacity: 0.84;
    filter: brightness(0.4)
  }

推荐答案

问题似乎与过滤器有关:

The problem seems to be related to the filters: Slow CSS Filters on iPhone?

我添加了以上提到的这些属性，并且似乎可以正常工作:

I added these properties as metioned above and it seems to work:

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

这篇关于iOS 11浏览器图像错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！