Error rendering html img in iphone screens

Question

I am experiencing a bug in the web i am developing.

In an ordinary grid of projects, bits of images appear on top of other html img placeholders in the nearby, with erratic behaviour on scrolling or zooming.

It only happens on certain iphones, not all of them, but when it happens it's on both safari and chrome ios. Everything is ok in desktop.

The error does not happen immediately, but after navigating a while. Once the error occurs, it persists even after refreshing the page. This video shows it best: https://vimeo.com/245343214

The code seems ok: jorgevidal.eu

At first i thought it could be related to isotope (masonry), but disabling it would not fix the error.

Screenshots from 2017 iPhone 7:

Answer 1

The error was fixed deleting the css affecting the filters on images.

So the code

@media (max-width:1024px){

        img{filter:none; -webkit-filter: contrast(1) grayscale(0%);}

}

was causing the bug.