最新版Chrome中模态框头部出现异常边框是什么原因？

你在最新版Chrome里看到的这圈找不到设置来源的边框，不是手动编写的border、outline、box-shadow样式导致的，本质是Chrome GPU合成层渲染的子像素错位问题：

• 你给.modal元素设置了transform-style: preserve-3d、translate3d(0,0,0)这类属性，会直接触发Chrome为该元素创建独立的GPU合成层，跳过常规CPU排版渲染流程
• GPU渲染合成层时会对元素边缘做抗锯齿平滑处理，这会导致元素的实际视觉边界和CSS定义的盒模型边界出现最多1px的子像素位置偏差
• 因为父级.modalBackground是带40%透明度的黑色背景，这些错位露出的边缘没有被元素自身的不透明背景、边框完全覆盖，半透明黑色透出来就形成了你观察到的异常边框——它会出现在元素上侧、左侧，且右侧视觉效果更突出，这是因为Chrome合成层的渲染逻辑里，右侧方向的抗锯齿偏移量天然比其他方向稍大，所以这一侧的异常表现会更明显。

你已经排查过浏览器默认焦点框的可能：给.modal和内部的.header都设置了outline: none，哪怕触发Tab焦点状态也不会生成默认蓝色边框；换用Flex布局实现居中后异常依旧的原因也很明确：合成层的渲染逻辑和页面布局方式无关，只要元素触发了独立GPU合成，子像素偏移的问题就会持续存在。

• 移除不必要的3D合成触发属性
  删掉.modal上的transform-style: preserve-3d，把原有的合并transform简化为普通2D位移transform: translate(-50%, -50%)，不触发强制GPU合成的前提下，就不会出现子像素偏移的异常边缘。
• 保留合成效果的前提下补偿渲染偏移
  如果必须保留3D变换的居中效果，给.modal增加1px的内边距，同时设置background-clip: padding-box，让元素的不透明背景向外延伸覆盖住错位的边缘，避免半透明父层透色。
• 同色边缘覆盖
  给.modal加1px的同色实心阴影box-shadow: 0 0 0 1px #FFBF76;，用和现有边框同色的阴影完全盖住错位露出的半透明边缘。

内容的提问来源于stack exchange，提问作者Rollie