html - chrome 中的 Macos 特定错误。在 windows chrome 中运行良好

Question

我的 html、css 和 js 代码适用于我的 windows pc，但不适用于 mac。mac版的chrome和windows版有什么区别可能会影响我的代码？

这是我想要做的： https ://jsfiddle.net/6vjq80xt/11/

（我建议全屏运行窗口）

您看到的问题是文本（选项 1、选项 2、选项 3 等等..）有点闪烁。为什么会这样？

它似乎在我的 chrome 的 windows pc 上工作正常。

我有点不确定，但我认为正在发生的事情是计算机是否subnav_front应该在前面（就 z 轴而言）或者是否subnav_back应该在前面感到困惑。

subnav_back如果您将背景颜色更改为蓝色以外的颜色，这就是您所看到的。

但是，那么，为什么它可以在 windows 上运行，而不是在 mac osx 上呢？

如果 jsfiddle 不起作用，代码如下：

.subnav_section{
		margin: 15vw;
}

.subnav_container{

	margin: 0vw 1vw;                               
	/*perspective: 900px;*/
	display: inline-block;
}
.subnav{
    position: relative;
    background-color: blue;
    height: 15vw;
    width: 15vw;
    text-align: center;
    font-size: 40px;
    line-height: 90px;
    transition: 1.5s;
    transform-style: preserve-3d;
    translateZ: 0;
}    
.subnav:hover{
    transform: rotateY(180deg);
   }
.subnav_front, .subnav_back{
	position: absolute;
	height: 15vw;
	width: 15vw;
	top: 0px;
	left: 0px;
	backface-visibility: hidden;
}
.subnav_back{
	transform: rotateY(180deg);
}
.subnav_images{
	height: 15vw;
	width: 15vw;
}
    

<div class="subnav_section">
    <div class="subnav_container">
    			<div class="subnav">
    					<div class="subnav_front">
    						<img class="subnav_images" src="http://catsatthestudios.com/wp-content/uploads/2017/12/12920541_1345368955489850_5587934409579916708_n-2-960x410.jpg" alt="Some_Image">
    					</div>
    					<div class="subnav_back">
    						Option 1
    					</div>
    				</div>
    			</div>
    			<div class="subnav_container">
    				<div class="subnav">
    				<div class="subnav_front"><img class="subnav_images" src="Pics/brain.png" alt="Some_Image"></div>
    				<div class="subnav_back">Option 2</div>
    				</div>
    			</div>
    			<div class="subnav_container">
    				<div class="subnav">
    				<div class="subnav_front"><img class="subnav_images" src="http://catsatthestudios.com/wp-content/uploads/2017/12/12920541_1345368955489850_5587934409579916708_n-2-960x410.jpgg" alt="Some_Image"></div>
    				<div class="subnav_back"> Option 3</div>
    				</div>
    			</div>
    			<div class="subnav_container">
    				<div class="subnav">
    				<div class="subnav_front"><img class="subnav_images" src="Pics/brain.png" alt="Some_Image"></div>
    				<div class="subnav_back"> Option 4</div>
    				</div>
    			</div>
      			<div class="subnav_container">
    				<div class="subnav">
    				<div class="subnav_front"><img class="subnav_images" src="Pics/brain.png" alt="Some_Image"></div>
    				<div class="subnav_back">Option  4</div>
    				</div>
    			</div>
    			<div class="subnav_container">
    				<div class="subnav">
    				<div class="subnav_front"><img class="subnav_images" src="http://catsatthestudios.com/wp-content/uploads/2017/12/12920541_1345368955489850_5587934409579916708_n-2-960x410.jpg" alt="Some_Image"></div>
    				<div class="subnav_back"> Option 5</div>
    				</div>
    			</div>
    	</div>
   </div>

标签： htmlcssgoogle-chromemacos-high-sierra