应用不透明度时，Chrome会平滑Z-translated元素

Question

你知道什么是铬的原因吗？有补救措施吗？

＆＃13;

＆＃13;

session_start();

    if(array_key_exists("content", $_POST)){

    include("connection.php");//link to your server

    $query = "UPDATE `users` SET `updateColumn`= '".mysqli_real_escape_string($link, $_POST['content'])."' WHERE id= ".mysqli_real_escape_string($link, $_SESSION['id'])." LIMIT 1";

    if(mysqli_query($link, $query)){
        echo "success";

    }else {
        echo "failed";
    }

}

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

将opacity与1以外的值一起使用会将元素置于新的位置   stacking context

这使得浏览器在符合new specification的情况下展平。

使用包装元素上的opcaity解决了这个问题：

<div style="perspective:500px;opacity:.5">
	<div style="
		width:40px; 
		height:40px; 
		background: green; 
		padding: 30px; 
		transform: rotateY(50deg); 
		transform-style: preserve-3d
	">
		<div style="transform: translateZ(60px)">
			content
		</div>
	</div>
</div>

Answer 2

我想说这是根据标准应该发生的事情：

  

transform-style的preserve-3d值建立了堆叠上下文。

     

以下CSS属性值要求用户代理创建   在它们可以之前展平后代元素的表示   应用，因此覆盖transform-style的行为：   保留-3D：

     

溢出：除'可见'以外的任何值

     

不透明度：除1之外的任何值。

     

filter：除'none'以外的任何值。

w3c spec