iOS 11 浏览器图像错误答案

【问题标题】：iOS 11 browsers image bugiOS 11 浏览器图像错误
【发布时间】：2018-05-25 04:00:14
【问题描述】：

滚动页面时，我在 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)
  }

【问题讨论】：

您可能需要发布一些代码才能获得体面的响应。正如您所说，图像上的绝对定位可能是问题，但如果没有代码，这只是猜测。
我可以确认这个问题，它似乎出现在实际的 iphone 设备上，但不在模拟器中 - 很奇怪

标签： ios css image reactjs

【解决方案1】：

问题似乎与过滤器有关：Slow CSS Filters on iPhone?

我添加了上面提到的这些属性，它似乎工作：

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

【讨论】：

我不明白为什么会这样，但确实如此！谢谢。就我而言，该错误甚至影响了页面下方的未过滤图像。
我无法让这个解决方案为我工作。相反，我不在 iOS 设备上应用过滤器。
我不知道为什么，但这些设置解决了我在移动 safari 上使用 filter: grayscale(x) 时遇到的问题。