0

I have the following html and css: https://codepen.io/marceltudor/pen/xxJBqRO

It works well on android. Meaning that it shows the clipping part, and does not show all the picture. On Edge and Chrome with developper tools and simulating the iPhone XR it works well.

However on my real iPhone XR updated to the latest iOS 16.4.1 I see the following whole image thus without clippings. real iPhone XR screen

When I minimize the Safari and open another app and then open again Safari I see the clippings. I need to see the clippings from the very beginning, not only after I switch to another app and back to Safari. I've added the -webkit-...

I copy here as well the code:

.clip-svg {
  clip-path: url(#myClip);
  -webkit-clip-path: url(#myClip);
  animation: fadeInAnimation ease 3s;
  -webkit-animation: fadeInAnimation ease 3s;
}

#image-overlay {
  position: absolute;
}

#image {
  opacity: 0.035;
  -webkit-opacity: 0.035;
}

.container {
  position: relative;
}

#overlay {
  padding: 10px;
  inset: 0;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-opacity: 1;
  }
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="overlay.css">
</head>

<body>
  <div class="container">
    <img id="image-overlay" class="clip-svg" src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" />
    <img src="https://miro.medium.com/v2/resize:fit:1400/0*kAOAT0_uC42E9V5l" id="image" />

  </div>

  <svg>
          <defs>
            <clipPath id="myClip" clipPathUnits="objectBoundingBox">
              <polygon points="0,0 .4,0 .4,.4 0,.4"/>
              <circle cx=".2" cy=".42" r=".04"/>
              <circle cx=".4" cy=".2" r=".04"/>
              <polygon points=".6,.6 1,.6 1,1 .6,1" />    
              <circle cx=".8" cy=".6" r=".04"/>
              <circle cx=".6" cy=".8" r=".04"/>
              <polygon points=".6,0 1,0 1,.4 .6,.4" />
              <circle cx=".6" cy=".2" r=".04"/>
              <circle cx=".8" cy=".4" r=".04"/>
              <polygon points="0,.6 .4,.6 .4,1 0,1"/>
              <circle cx=".2" cy=".6" r=".04"/>
              <circle cx=".4" cy=".8" r=".04"/>

            </clipPath>
          </defs>
</svg>


</html>

The above code snippet is the same as on the code-pen link.

MMT
  • 81
  • 9
  • It works ok with the snippet on a real iPhone SE. Have you tried waiting until the image is fully loaded before applying the clipping? I know it shouldn’t matter, but can’t think of any thing other than a timing problem. – A Haworth May 12 '23 at 17:14
  • @AHaworth thank you. I tried again for the snippet here on stackoverflow and it's the same story the clipping do not appear. I waited quite a lot 60 seconds and no clippings. I installed chrome on the iPHone XR and it's the same behaviour meaning that the clippings do not appear initially but then when I switch to another app and come back the clippings appear. – MMT May 12 '23 at 19:06
  • How did you wait? I meant waiting for onload of the image before applying the CSS. – A Haworth May 12 '23 at 19:08
  • @AHaworth Thank you for your answer. You mean to use a javascript to wait for the onload of the image to finish and then apply the css? Otherwise I do not understand your question. – MMT May 13 '23 at 13:58
  • While searching on the internet I came across https://stackoverflow.com/questions/41860477/why-doesnt-css-clip-path-with-svg-work-in-safari that says it's a bug/incomplete implementation of clip-path in Safari. Even though I believe for what I need and according to this, it should be supported: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path – MMT May 13 '23 at 14:01
  • I am seeing it run ok on Safari which means the problem may be device dependent, eg timing. Yes, I meant wait for the img to load before applying the CSS. – A Haworth May 13 '23 at 15:57
  • Hi, I have a similar problem. It's very strange that it works on iOS 16.0 safari, but on newer version 16.4 it's broken... – Vít Zadina Jun 14 '23 at 14:12

0 Answers0