剪辑路径不禁用 :after 在 ios 上的鼠标事件答案

【问题标题】：Clip-path not disabling mouse events of :after on ios剪辑路径不禁用 :after 在 ios 上的鼠标事件
【发布时间】：2021-12-26 09:04:30
【问题描述】：

为什么剪辑路径在我的电脑浏览器上的剪辑区域上抑制鼠标事件，但在我的 ios 移动浏览器上却以不同的方式运行？在我的电脑上测试this，当我从底部将鼠标悬停在标题上时，仅当我的光标通过剪切区域（红色轮廓）时才会激活 :hover 类，但在我的 iPhone 上，我可以点击标题下方的空间（剪切区域) 并且它仍然会激活。我也在安卓手机上测试过，效果符合预期。

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>

【问题讨论】：

标签： html css ios mobile-website clip-path

【解决方案1】：

我想这归结为 Safari 是如何实现剪辑路径的。也许您可以在 WebKit 的错误跟踪器上找到有关它的信息？他们有一个剪辑路径的主要错误：https://bugs.webkit.org/show_bug.cgi?id=126207 编辑：如果你有一台 Mac，你可能会通过调试/检查来获得更多的洞察力。该实现通常在 macOS 和 iOS 中存在相同的错误/问题。

【讨论】：

这似乎是一个错误。但是，我不确定这是否是 webkit 错误，因为我在 iPhone 上测试的多个浏览器的行为方式相同。由于我使用的剪辑路径是一个矩形，我可以通过添加一个容器并设置溢出来实现类似的效果：隐藏