ipad公司的Safari元件消失，并且具有延迟

问题描述：

对于此bug我所提到的下面堆栈溢出问题并在CSS如下已应用于再现（参考： iPad Safari scrolling causes HTML elements to disappear and reappear with a delay）ipad公司的Safari元件消失，并且具有延迟

*:not(html) { 
    -webkit-transform: translate3d(0, 0, 0); 
}

施加后，我面临一个新问题。这就是说，如果我为某个元素应用了固定位置，那么在浏览器顶部不是固定的，而不是滚动。

如果我删除上面的CSS，它工作正常。（参考：Position fixed not working is working like absolute）

如何解决这个问题，而不影响固定的元素？

您可以添加一些您的实际代码吗？ – Zze

请创建带有问题的代码段。 –

答

变换创建一个new stacking order and context。这意味着fixed定位将不再与视口绑定。

在这种特殊情况下，最简单的答案就是无法将变换和fixed定位结合起来。

感谢您的好消息。那么如何避免元素在ipad中重新出现而不影响固定元素？有没有解决方案？ –

@JeevaJsb我最好的建议是避免使用这种黑客时尚。不要将它应用于一切。尝试仅将其应用于闪烁的元素。否则，重新设计你的页面，以便你根本不需要这个黑客。 –

答

如果你想使用这个技巧来保持，你可以尝试分开固定的元素和内容，是这样的：

html, body { 
 
    margin: 0; 
 
    overflow-y: hidden; 
 
    height: 100%; 
 
} 
 

 
.content, .content * { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
} 
 

 
.content { 
 
    -webkit-overflow-scrolling: touch; 
 
    height: 100%; 
 
    overflow-y: auto; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    background: red; 
 
    width: 100%; 
 
    padding: 20px; 
 
    z-index: 1; 
 
} 
 

 
.content-example { 
 
    height: 2000px; 
 
    background: yellow; 
 
}

<div class="fixed">Fixed</div> 
 
<div class="content"> 
 
    <div class="content-example"></div> 
 
</div>

没有你的HTML/CSS我不能更确切地说，但我建议你避免使用这种黑客，并尝试正确地更改你的代码。

ipad公司的Safari元件消失，并且具有延迟

相关推荐