html - 剪辑路径不禁用 :after 在 ios 上的鼠标事件
问题描述
为什么剪辑路径在我的电脑浏览器上的剪辑区域上抑制鼠标事件,但在我的 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 的错误跟踪器上找到有关它的信息?他们有一个剪辑路径的主要错误:https ://bugs.webkit.org/show_bug.cgi?id=126207 编辑:如果你有一台 Mac,你可能会通过调试/检查它获得更多洞察力。该实现通常在 macOS 和 iOS 中存在相同的错误/问题。
推荐阅读
- r - 在没有明确提及的情况下检索列
- html - angular - 如何创建不干扰组件和样式层次结构的组件?
- javascript - 在 Node.js 中使用 Aysnc/Await 时出现语法错误
- lua - lua中表格的奇怪错误
- python - 从 for 循环分配字典键
- python - 如何查看 Lambda /tmp 存储大小的大小?
- javascript - CSS防止div向下移动
- python - 预测时是否可以从预训练的 vgg 模型中获得第 1 层和第 5 层输出?
- python - 设置关键利率报价值后,信用利差的 QuantLib 债券定价不起作用
- ios - 为架构 x86_64 获取错误未定义符号:“_sqlite3_prepare_v3”React Native Firebase