奇怪的 safari 渲染问题，以及在其他浏览器上的低性能 [英] Strange safari rendering issues, and low performance on other browsers

问题描述

我正在开发一个网站，但是我不知道是什么导致了这么多问题.

I'm in the middle of development of a website, however I cannot work out what is causing this plethora of issues.

在 OS X 上的 Safari(10.9.4 上的 7.0.6)中，随机元素会消失并重新出现，悬停在下拉菜单或按钮上时，它们会突然重新出现.这是非常奇怪和不稳定的.

In Safari on OS X (7.0.6 on 10.9.4), random elements will disappear and reappear and hovering over the drop down menu, or a button, they suddenly re-appear. It is very strange and erratic.

在 Chrome (v36.0.1985.143) 和 Firefox (v31.0) 中，滚动性能较差，但没有渲染问题.

In Chrome (v36.0.1985.143) and Firefox (v31.0) the scrolling performance is poor, but no rendering issue.

所有 onscroll 事件都是干净的.我尝试对几乎所有内容进行调整，但一无所获.

All onscroll events are clean. I've tried tweaking with just about everything and gotten nowhere.

如果有人能解决这个问题，我将不胜感激.提前致谢.

If anybody can work this out, I'll be greatly appreciative. Thanks in advance.

推荐答案

我在 chrome 或 firefox 上没有看到任何滚动性能问题，但我注意到 Safari 呈现故障.

I don't see any scrolling performance issue on chrome or firefox, but I noticed Safari rendering glitches.

当您强制回流时，您的所有部分都会再次显示.尝试在您的 .section 类中添加一个 backface-visibility:hidden;.

When you force reflow, all your sections are displaying again. Try to add a backface-visibility:hidden; on your .section class.

您的 #background-area 是固定的，没有任何 z-index.把它放在 z-index: -1; 中以保持在后面.

Your #background-area is fixed and doesn't have any z-index. Put it to z-index: -1; to keep it in the back.

这篇关于奇怪的 safari 渲染问题，以及在其他浏览器上的低性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！