xiazeyu
commented
2 years ago Some workaround:
change themes/gatsby-theme-cara/src/templates/cara.tsx:
from
const Cara = () => (
<Layout>
<Parallax pages={5}>
<Hero offset={0} factor={1} />
<Projects offset={1} factor={2} />
<About offset={3} factor={1} />
<Contact offset={4} factor={1} />
</Parallax>
</Layout>
)to
const Cara = () => (
<Layout>
<Parallax pages={4}>
<Hero offset={0} factor={1} />
<Projects offset={1} factor={1} />
<About offset={2} factor={1} />
<Contact offset={3} factor={1} />
</Parallax>
</Layout>
)That works fine for me.
It seems to me that the pages={5} designing method is not working well with the footer.
LekoArts
Description
I'm now using Gatsby Starter Portfolio: Cara, and when I visit my page and the official demo.
The footer component is not rendered frequently. This problem is also for my profile page with code.
After I tried resize the window, and do some selecting, the footer appears.
It is confirmed that this is not due to network issue, and the footer component did appear in the DevTools of Chrome and Edge.
See screenshots below.
The correct appearance is really important for me due to censor requirements in my country.
Steps to reproduce
I entered the official demo, and scrolled down to the footer.
Expected result
The footer should render like this.
Actual result
Most of the time, the footer renders like this.
The footer component appears in the DevTool:
Sometime the component is like this.
If I drag around the footer area, or resize the window, the full footer appears.
I also tried no-cache and private mode, and the problem still exists.
Environment
I'm now using Google Chrome 97.0.4692.99(latest) and Microsoft Edge 97.0.1072.76 on Windows 11 (Dev 22543.1000) with NVIDIA Geforce GTX 1080 on 1920x1080 resolution.
The problems appers both in fullscreen mode and windows mode.