12 replies · opened Jul 27, 2016
Hi there
I have used all your Canvas files to make a Keystone.js app. When I load the pages it jumps, loads from the bottom and then loads the hero. Any idea what could be causing this? I'm assuming it's something in the CSS.
Here is a link to the development site https://guarded-ridge-84478.herokuapp.com.
Any help would be greatly appreciated.
Matt
Hello,
We have checked out your Website and noticed that a Lot of your Content is outside the #wrapper Container which causes an issue. Please add them inside the #wrapper Container to avoid further issues. Please follow the HTML Structure as mentioned in the Documentation > Start > HTML Structure Section.
This will automatically fix your issues. Let us know if we can help you with anything else or if you find any further issues.
Hey Guys
Thanks for pointing that out. I have fixed the #wrapper issue but still exactly the same. Loads the same. I've just uploaded another app and it does the same thing. https://stormy-temple-18005.herokuapp.com/
I've tried inlining critical CSS and nothing seems to be working. It must be a CSS block somewhere?
Matt
This is not resolved but I can't change the status
Hello,
We have just checked this out for you and the issue is that the following CSS is missing from your CSS File:
body:not(.no-transition) #wrapper,
.animsition-overlay {
position: relative;
opacity: 0;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}which is causing an issue. Adding this will automatically fix your issue.
Let us know if we can help you with anything else or if you find any further issues.
Thank you.
Would the less format look like this?
body {
&:not(.no-transition) {
#wrapper {
.animsition-overlay {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
opacity: 0;
position: relative;
}
}
}
}
`body {
&:not(.no-transition) {
#wrapper {
.animsition-overlay {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
opacity: 0;
position: relative;
}
}
}
}
body {
&:not(.no-transition) {
#wrapper {
.animsition-overlay {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
opacity: 0;
position: relative;
}
}
}
}Hello,
You can simply use the above Code provided by us for the LESS.
Let us know if we can help you with anything else or if you find any further issues.
I've just noticed none of the "Page Transitions" CSS section is in the less files. Is there a reason for this? Could you possibly put together a less package with this inside please?
Hello,
You can find the LESS CSS for the Page Transitions in the less/extras.less File in the Package/HTML Folder.
Let us know if we can help you with anything else or if you find any further issues.
Aaaaaah FIXED!!!!
Thank you so much for your help.
And thanks again for the amazing package. Saved me many many hours of work. Look forward to seeing what you guys come up with next.
Matt
Hello,
Thank You so much for the Kind Words. :)
Really Glad that your issues were resolved. Very Happy to Help! :)
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard