Wordpress 页面加载但所有内容不可见

Question

我正在竭尽全力试图弄清楚我的网站页面发生了什么。在桌面上，全屏，我的页面加载和显示没有问题。事实上，页面测试很好，FireBug 控制台中没有出现任何错误。如果我将浏览器窗口的大小调整为大约具有屏幕大小并刷新页面，或加载站点上的其他页面之一，页面似乎已加载，但所有内容均不可见。 Firebug 显示所有代码都已正确加载，滚动条似乎显示内容大于窗口，如果我在将鼠标移到页面上时使用 firebug 内容检查器，则各个部分突出显示但一切都是白色的（即不可见） .如果我然后调整窗口大小以使其更大，所有内容都会突然出现。

我在这个链接制作了一个视频演示：DropBox page load video

该页面根本不会显示在移动设备上，尽管滚动条再次出现，表明内容在那里，但只是不可见。

如果你想自己试试，网址是http://sounusual.com

以前有人遇到过这个问题吗？什么可能导致它，我该如何解决它？

一点背景。该网站正在使用 Wordpress。问题肯定与正在使用的模板有关。模板似乎是由业余爱好者创建的。他正在尝试解决我遇到的一些问题，但似乎对这个问题犹豫不决，所以我最终可能不得不自己解决它，但不确定从哪里开始。

TIA

Answer 1

我在您的网站上进行了一些实验，问题的根源似乎是包含 .page-transition 类的主要内容的 div 包装器：

<div class="page-transition" ...

该类的不透明度设置为 0：

.page-transition {
    position: relative;
    opacity: 0;
    ...

当设备尺寸大于 1200px 时，该 div 会获得额外的 .pageTransitionEnd 类，将不透明度设置为 1：

.page-transition.pageTransitionEnd {
    opacity: 1;
}

所以你需要弄清楚是什么增加了 .pageTransitionEnd 类，以及为什么它在小于 1200 像素的设备宽度上不起作用。