为什么剪辑路径在我的pc浏览器上抑制剪辑区域上的鼠标事件，但在我的ios移动浏览器上却不能正常工作？在我的电脑上测试这一点时，当我从底部悬停在标题上时，：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>我想这取决于Safari是如何实现剪辑路径的。也许你可以在WebKit的bug跟踪器上找到一些关于它的信息？他们有一个剪辑路径的主错误：https://bugs.webkit.org/show_bug.cgi?id=126207编辑：如果你有一台Mac，你可以通过调试/检查它来获得更多的洞察力。在macOS和iOS中，实现通常会出现相同的错误/问题。