iOS 11 browsers image bug

问题

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.

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)
  }

回答1:

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;

来源：https://stackoverflow.com/questions/47756158/ios-11-browsers-image-bug