Clip-path not disabling mouse events of :after on ios-CodePudding

Why is clip-path suppressing mouse events on clipped areas on my pc browser but is not functioning the same way on my ios mobile browser? Testing this on my pc, when I hover over the title from the bottom the :hover class activates only when my cursor passes the clipped area (red outline) but on my iphone, I can tap the space below the title (clipped area) and it will still activate. I have also tested it on an android phone, and it works as expected.

Show code snippet

body {
  background-color: #000;
}
.title {
  background-color: transparent;
  display: inline-block;
  outline: solid red 1px;
  position: relative;
  font-family: "Zen Kurenaido";
  font-size: 45vw;
  font-weight: normal;
  letter-spacing: -1vw;
  color: rgba(255, 255, 255, 0.5);
  z-index: 1;
  line-height: 1;

  /* -webkit-clip-path: polygon(0 20%, 108% 20%, 108% 101%, 0 101%);
  clip-path: polygon(0 20%, 108% 20%, 108% 101%, 0 101%); */
  -webkit-clip-path: polygon(0 20%, 108% 20%, 108% 50%, 0 50%);
  clip-path: polygon(0 20%, 108% 20%, 108% 50%, 0 50%);
}
.title:after {
  content: "Title";
  position: absolute;
  left: 5.5vw;
  top: 2vw;
  color: rgba(100, 100, 100, 0.5);
  background-color: transparent;
  outline: solid blue 1px;
}
.title:hover,
.title:focus {
  background-color: transparent;
  outline: solid orange 1px;

  color: rgba(100, 100, 100, 0.7);
}

.title:hover:after,
.title:focus:after {
  background-color: transparent;
  outline: solid purple 1px;
  color: rgba(255, 255, 255, 0.7);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link
      href="https://fonts.googleapis.com/css2?family=Zen Kurenaido&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <span class=title>Title</span>

    <script src="src/index.js"></script>
  </body>
</html>

CodePudding user response：

I guess it comes down to how Safari has implemented clip-path. Perhaps you can find something about it on the bug tracker for WebKit? They have a master bug for clip path: https://bugs.webkit.org/show_bug.cgi?id=126207 Edit: if you have a Mac you might gain more insight by debugging/inspecting on it. The implementation often carries the same bugs/issues across macOS and iOS.