【油猴脚本】头像名片穿透修复、原生的图片切换（上一张、下一张）按钮找回

哈哈哈哈_ · 发表于昨天 21:28

一、头像名片的覆盖穿透
逛论坛的时候，发现了一个奇怪的小问题：
论坛左侧用户头像，鼠标悬浮后会出现用户详细名片。但是有时候，帖子右侧的图片会直接覆盖到了悬浮名片上。

最开始想的是元素的z-index没设置好（z-index数值大的会显示在数值小的上面）
这类问题很好解决，z-index值调大些就行

调出浏览器的控制台，意外发现，名片div有z-index: 301; ，图片img没有z-index。
不管怎么调z-index，帖子中图片总是覆盖在名片上。
这就很奇怪了。

二、一个冷门属性
既然不是 z-index，那就只能继续找原因。
检查图片的样式时，发现图片img上有个 isolation: isolate; 属性
这个属性很冷门，平时没有见过，抱着试一试的心态，直接取消勾选这行
结果，头像名片悬浮时候，正常显示在图片上方

毕竟只是个外观问题，不影响正常的功能，就不想发帖
写了个油猴脚本强制覆盖原本的属性 isolation: auto !important;

三、疑惑
论坛启用原本的图片预览后，看到一篇帖子，快捷切换图片

点开图片时，按ad或者←→快捷切换图片

当时觉得奇怪，论坛图片上有上一张、下一张切换按钮，本来就很方便，不过这个快捷键脚本也算补充方法，放着没有深究

四、谜团
写论坛的其他脚本，经常会开启、关闭油猴
某天，在浏览论坛帖子时候，发现原生的上一张、下一张切换按钮竟然消失了
论坛这个老古董，平时偶尔会出现Bug刷新页面又正常：

图片加载不出来
图片上的黄色提示块无法消失

怀疑是论坛的原因

五、真相
发现了一个细节：关闭油猴按钮消失，开启油猴按钮出现。
在反复开关脚本，终于确认，是自己的脚本让这个按钮显示，把自己的脚本排查了一遍，找到了真相：

有了 isolation: auto !important; 切换按钮就能显示
没有 isolation: auto !important; 切换按钮不能显示

六、为什么一个 isolation 会产生这种效果？
这是个冷门、小众的属性，平时几乎不会用到这个属性
1. 隔离层叠上下文，避免 z-index 相互污染
在一个庞大的项目里，可能会有成百上千个组件，每个组件都是不同的人写的。如果有人在某个组件里写了 z-index: 9999，另一个人写了 z-index: 10000，层级很快就会陷入混乱。
为了保全自己组件内部的层级不被外部干扰，就会用 isolation: isolate;
2. 配合mix-blend-mode
mix-blend-mode混合模式，可以将元素内容与背景进行颜色混合、正片叠底、滤色等视觉效果，
如果没有限制，这个混合效果会一路穿透，把网页最底层的 <body> 背景色也一起混合进去，
这时候，加上用 isolation: isolate 相当于把这一块区域圈起来，浏览器混合时只在这个容器内部生效

七、最后
本来只是解决头像悬浮名片被图片覆盖的问题
没想到还有意外收获，把论坛原生的上一张、下一张切换按钮找出来了

（除了预览图片有切换按钮，帖子内部也会有切换按钮）
（不知道为了XX泥潭引入了isolation，目前用下来没看到有什么图片错位的Bug）
（希望泥潭能从根本上修复这个Bug，这样就不用安装脚本，每个人都能用上）

最终代码

@Name @Name @Name @Name @Name

补充：代码区里的@name避坑
1. 自动替换代码的“@name 注释”
猴脚本的元数据头，有个 // @name 脚本名称声明
论坛自带一个智能的 @功能，会进行替换
当把代码放到论坛的代码区并点击发布后，代码区中的注释，会被自动替换为 @name
2. 防替换方法
既然泥潭会替换，那么在代码区上方，人为放置一个纯文本的 @Name ，泥潭就会解析替换代码区外的
有时候，会多次编辑、修改帖子，当保存时，论坛会再次触发解析替换
在代码区上方多放两三个纯文本的 @Name。每次修改就让它替换一个，像多层护盾一样
3. 复制他人的坑
复制他人的代码区上方的挡箭牌，发现没生效
这是@Name已经被替换过，变成蓝色超链接，不会再次被替换
当直接粘贴（Ctrl+V），会把底层的富文本标签一起粘贴进去
所以，右键粘贴时候，一定要选择以纯文本格式粘贴（或者 Ctrl+Shift+V 纯文本粘贴）