Html CSS3具有渲染的奇怪行为

当用户将鼠标悬停在列上或不悬停在列上时，不同分辨率上会出现1px行。它发生在IE11（悬停）、Edge（悬停）、Firefox（在列之间悬停时闪烁）和Chrome（居中）浏览器上，也可能发生在其他浏览器上。源代码如下，并附上图片。提前谢谢

/*重置css*/
*{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
.科{
显示器：flex；
flex-flow：行nowrap；
证明内容：中心；
}
.节.栏{
宽度：25%；
溢出：隐藏；
位置：相对位置；
}
.section.wrapper{
宽度：100%；
身高：50%；
填充：12.5%7.5%07.5%；
框大小：边框框；
背景：rgba（0,0,0,0.4）；
光标：指针；
位置：绝对位置；
底部：0；
左：0；
右：0；
}
.section.bg{
宽度：100%；
高度：100vh；
过渡：一切都很轻松；
背面可见性：隐藏；
背景：url(https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/iPhone6_With_iPad_PSD_template.png)居中/盖不重复；
}
.section.column:hover.bg{
变换：scale3d（1.3,1.3,1.3）；
}

一些文本
一些文本
一些文本
一些文本

在我看来，问题似乎是隐藏了背面可视性。我能够在Chrome中重现您的问题，并移除背面可见性：隐藏修复了它

.section .bg{
    ...
    backface-visibility: hidden;
    ...
}

---

添加额外的包装器

并更改为显示表似乎解决了所有浏览器上的问题

/*重置css*/
*{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
.科{
宽度：100%；
显示：表格；
}
.节.栏{
宽度：25%；
高度：100vh；
显示：表格单元格；
}
.货柜组{
宽度：100%；
身高：100%；
溢出：隐藏；
位置：相对位置；
}
.section.wrapper{
宽度：100%；
身高：50%；
填充：12.5%7.5%07.5%；
框大小：边框框；
背景：rgba（0,0,0,0.4）；
光标：指针；
位置：绝对位置；
底部：0；
左：0；
右：0；
}
.section.bg{
位置：绝对位置；
宽度：101%；/*firefox修复程序*/
身高：100%；
过渡：一切都很轻松；
z指数：-1；
背景：url(https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/iPhone6_With_iPad_PSD_template.png)居中/盖不重复；
}
.section.column:hover.bg{
变换：scale3d（1.3,1.3,1.3）；
}

一些文本
一些文本
一些文本
一些文本

检查您的：悬停声明。它没有有效的css。我改为.section.column.bg:hover{transform:scale（1.3）；}，但仍然存在一个问题，谢谢。它似乎在Chrome上运行良好，但不同的浏览器仍然存在这个问题。