iOS 11 浏览器图像错误

IT技术 ios css image reactjs
2021-05-08 01:18:41

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

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

在此处输入图片说明

预期形象

图 2 显示了该图像在 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)
  }
1个回答

问题似乎与过滤器有关:iPhone 上的慢 CSS 过滤器?

我添加了上面提到的这些属性,它似乎有效:

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