3

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.

enter image description here

Intended image

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)
  }
seque90
  • 181
  • 2
  • 13
  • You'll probably need to post some code before you get a decent response. Absolute positioning on your images could be the problem as you say but without code it's just guesswork. – Billy Moat Dec 11 '17 at 15:54
  • 2
    I can confirm this issue and it seems it appear on the actual iphone device but NOT in the simulator - very strange – jvence Jan 07 '19 at 13:59

1 Answers1

8

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;
seque90
  • 181
  • 2
  • 13
  • I don’t understand why this works, but it does! Thanks. In my case, the bug was even affecting non-filtered images further down the page. – Chris May 27 '19 at 13:03
  • I wasn't able to make this solution work for me. Instead, I do not apply the filter on iOS devices. – ScottBurfieldMills Jun 10 '19 at 01:05
  • I have no idea why, but these settings fixed the problem I am having with using `filter: grayscale(x)` on mobile safari. – williamli Jul 17 '19 at 06:21