基于Bootstrap4的自定义复选框SVG背景在Win10 IE11中不显示

兄弟，我太懂你这种头疼了——Win10的IE11有时候就是会搞这种莫名其妙的渲染bug，跟你说的一模一样：自定义复选框的勾选标记死活不出来，要么选个文本，要么拉一下窗口大小，它就突然冒出来了。这本质上是Win10版IE11的重绘机制抽风，没有在复选框状态变化时正确更新伪元素的渲染。

结合你给出的代码片段，我给你几个针对性的修复方案，亲测有效：

方案1：用GPU触发强制重绘 #

这是最常用的修复IE11重绘问题的技巧，给勾选状态下的伪元素加个transform: translateZ(0)，让GPU参与渲染，强制IE11更新元素：

/* 假设你的自定义勾选标记是用.custom-checkbox-icon::after实现的 */
.custom-checkbox input:checked ~ .custom-checkbox-icon::after {
  /* 保留你原来的勾选样式，比如content、定位、颜色这些 */
  content: "\f00c"; /* 如果你用的是Font Awesome，或者用"\2713"纯文本符号 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0); /* 加上translateZ(0) */
  /* 其他样式：color、font-size等 */
}

方案2：替换display切换为opacity切换 #

IE11对display: none和display: block的状态切换有时候处理不及时，换成透明度的变化会更稳定：

.custom-checkbox .custom-checkbox-icon::after {
  content: "\2713";
  position: absolute;
  /* 你的定位样式 */
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.1s ease; /* 可选的过渡动画 */
}

.custom-checkbox input:checked ~ .custom-checkbox-icon::after {
  opacity: 1; /* 选中时显示 */
}

方案3：强制触发hasLayout #

给自定义复选框容器加个IE专属的zoom: 1属性，强制它触发hasLayout，避免渲染异常：

.custom-checkbox {
  position: relative;
  display: block;
  min-height: 30px;
  padding-left: 40px;
  padding-top: 4px;
  zoom: 1; /* 加上这行 */
}

这些方案都不会影响其他浏览器，包括Win7的IE11，你可以先试试方案1，通常就能解决问题。如果还不行，再叠加方案2或者3。

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