近期某安卓系统页面时,发现页面上莫名会有一个小黑点
经过检查,发现此黑点并不存在代码中, 审查元素后也并未找到对应的元素内容,且并不是伪元素
尝试了修改容器及文字等各种元素的参数后依然没有成功解决,愁掉了几根头发后向gpt求助了一下,最终得到的解决方案是
backface-visibility: hidden;
transform: translateZ(0);
尝试之后发现问题被解决,但是对于该问题的出现依然存在疑惑, 目前个人猜测是因为页面的单位使用的均为vw, 在渲染时可能不是整数的px单位,再加上使用了一些如border-radius的样式,导致页面渲染混乱而出现此黑点,但只是个人看法
由于之前没有使用过backface-visibility属性,故专门搜索了一下,以下为查询到的结果
backface-visibility 是 CSS 的一个属性，用于控制在使用 3D 转换（如 transform: rotateY(180deg)）时，元素背面是否可见。这个属性主要用于创建 3D 旋转效果时控制元素的显示，让旋转后的背面可以隐藏或显示，增强视觉效果。
backface-visibility语法
backface-visibility: visible | hidden;
可选值
- visible（默认值）：允许元素的背面在旋转后可见。如果旋转元素，使得它的背面朝向用户，那么用户将看到背面内容。
- hidden：隐藏元素的背面。如果元素旋转后背面朝向用户，则会消失，背面内容不可见。
使用场景
- 翻转卡片效果：在实现类似卡片翻转的效果时，如果希望背面不可见，可以将
backface-visibility设置为hidden，避免用户看到翻转中卡片的背面内容。
但这个结果其实并没有为我解答出现问题的原因和为什么此属性能解决问题,后续会再尝试找到问题原因,
此文章意为记录本次问题同时为遇到此问题的人提供解决办法
如果有大佬看到这篇文章,希望可以指导一下关于这个问题的疑惑点:
1. 为什么会出现黑点问题
2.为什么下面的属性可以解决问题
感谢!
