Why doesn't grayscale work on apple devices?

Question

css

Website with link problem

HTML code

<div class="image-container">
      <div class="image-div">
        <img class="image" src="https://site/img/001.jpg" title="Андрей">
      </div>
      <div class="name">
        <p>Андрей</p>
      </div>
</div>

CSS code

.image-container:hover .image {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}

.image-div .image {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}