所有 fullpage.js 部分在第一次加载时同时显示

Question

直截了当，我的问题是所有部分在初始加载时同时短暂显示并堆叠在一起。

我找到了 exact same issue asked by someone else on github 并尝试将 css 中所有部分的高度设置为 100%，如下所示：.fp-section {height: 100%!important;} 但它没有用。 （如果我做错了请纠正我。）

然后我终于找到了一个有效的解决方案 hiding the body until the fullpage.js is fully loaded 就像这样：

body {display:none}
body[class*="fp-viewing-"] {display:block}

除了应该以特定屏幕宽度显示的响应式 div 之外，此解决方案一切正常。

澄清一下，我的 html 结构由 body 下的 <div id="fullpage"> 和 <div id="responsive"> 组成，默认显示全页 div 和响应式 div 在媒体查询下设置为 display: none 且仅在特定屏幕宽度下显示。

我还能做些什么来阻止所有部分在第一次加载时同时显示？

Answer 1

关于章节的问题，请查看我的回答here。

基本上：

假设 #fullpage 是您的整页包装器并且您使用默认选择器来选择部分和幻灯片：

html,
body,
#fullpage,
.section,
.slide,
.fp-tableCell,
{
    height: 100%
}