Canvas Support

Menu (/elements) changing size when loading (very subtle)

3 replies · opened Oct 10, 2020

AanckerstudiosOct 10, 2020

Hey SemiColonWeb.

First of awesome template! Keep up the good work.

I've encountered a small problem, and spend way to long time to figure a solution out, Hope you have a fix :)
I would pref a non-loading/Page Transitions fix if possible.

Unfortunately this "issue" is present in many of the pages.
If you open up your own package template:
.../Package-HTML/HTML/services.html

When the site loads, it does a very slight jump in content / header.
Is it possible to eliminate this jump? Would a Script change be able to correct this? or a hidden class/id?
I noticed in your documentation under Header Heights, you mention content can Jump.

Same with the animated Text that comes up, Is there a way or fix you would suggest that could eliminate the page jumping?
.../Package-HTML/HTML/intro.html

This page has a very noticable image jump. (just making you aware of this one)
.../Package-HTML/HTML/about.html

Thanks in advance, Good Weekend.

SSemicolon WebSTAFFOct 12, 2020

Hello,

Thanks so much for the Kind Words! :)

And Apologies about the Inconveniences about the issues.

  1. We have just checked out the Services Page: http://themes.semicolonweb.com/html/canvas/services.html and we are really noticing a Jump, would you be please kind enough to provide us with a Screencast of the same so that we can look into this.

  2. The Text Rotator on the Intro initializes when the Page Loads. And since these are JS related, this is the normal behavior of the Page. You can consider replacing the existing CSS Codes in the intro.html File with the following:
    [ch_pre type="css"].slider-element .text-rotater {
    display: inline-block;
    font-size: 7vw;
    min-height: 112px; /716px*/
    }

@media (min-width: 992px) {
.slider-element .text-rotater {
font-size: 5vw;
min-height: 80px; /516px*/
}
}

@media (min-width: 1200px) {
.slider-element .text-rotater {
font-size: 4vw;
min-height: 64px; /416px*/
}
}[/ch_pre]

and the jump can be avoided. However, this will always need Customizations and you will need to manually change the min-height values according to the Size of the Fonts.

  1. Again, unfortunately, since the Parallax Plugin initializes the Parallax Background Positions on Page Load according to the current position on the Page, this is something that cannot be controlled directly and will need considerable hacking like hiding the Background Section until it completely loads.

Since these are Elements are JS related, some of the content shifts are necessary during the Page Load and the best solution for this is to use Page Loading Transitions so that they are hidden until all the Initializations are complete. The Header/Content jumps were fixed in the recent versions of Canvas and have not been reported anymore. So please provide us with Screencasts if you are still seeing this issue and we will definitely look into this for you.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AanckerstudiosOct 12, 2020

Thanks for your detailed explaination.

This helps a ton, I don't mind customizing further, was just unsure what the best solution was, but these you have provided will do wonders.

About the Services Page: http://themes.semicolonweb.com/html/canvas/services.html
It is very subtle and does occur on multiple pages. giving you a few.

http://themes.semicolonweb.com/html/canvas/header-light.html
http://themes.semicolonweb.com/html/canvas/404.html
http://themes.semicolonweb.com/html/canvas/styled-icons.html

If you notice the Menu Bar when you load (F5, I'm on Chrome, not sure if its browser related)
After a split second after the load, the whole page shifts upwards, like the menu bar starts out at 101px, then is converted to 100px.

I'm wondering if a fix like you mentioned above with the Text Rotator could be implemented to the Menu Bar, to make it a fixed height before the Javascript takes over. I hope you know what I'm talking about. Again, its very subtle, but if you keep F5 then you will notice the jump after the content has loadded.

Otherwise let me know, Ill provide some more detailed "proof"

SSemicolon WebSTAFFOct 13, 2020

Hello,

Thanks for providing us with more details about this. The Height of the Header is controlled by the .header-wrap-clone Class. So simply set a fixed height for this and it will fix your issue. Example:
[ch_pre type="css"].header-wrap-clone {
height: 100px;
}[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

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