Text moving on pageload, why?

Dear,

Why is the text on the landing image not loading directly at the right place? It’s moving during pageload which is not good. Can you help identifying why it’s moving?

Thanks
Simon

Hi,

You have used full-width and full-height WPBakery row options simultaneously. Both of these options are calculated via JS during page loading and this is causing some visible jumps during loading. This issue can’t be completely fixed via theme update, but you can try to hardcode its values using the following custom code.

body {
	--wd-scroll-w: 17px;
}

.vc_row-o-full-height  {
	min-height: 100vh !important;
}

Kind Regards

Hi Bogdan,

Or maybe an alterative could be to exclude the related JS file from WP Rocket’s Delay JS ?

Do you know which file could be impacted by this?

Thanks
Simon

Hi,

Full-width and full-height WPBakery row options are initially done by JS. Woodmart theme CSS is only imitating the following work before JS is loaded to minimize jumps and twitching, but not replacing them. Excluding the following JS may cause layout issues.

The following options and JS is related to the WPBakery plugin, and don’t relate to the Woodmart theme. If you still want to disable them try to contact plugin developers.

Kind Regards

[Jeriss Cloud Center]

Dear,

On the page below, I removed the “full width” of the Section and I kept the “full height” on the Row but we still see some jumps of the text going up during pageload. I thought you said that using both options “simultaneously” causes the jumps, but if we use them separately it shouldn’t make jumps?

Please check the screenshot. Couldn’t this jump actually be caused by a hidden column that I added below the text? This row is visible only for mobile and low-resolution tablets. I added this to make adjustments on the display of texts for those devices (and I want to keep this hidden column).

What do you think?
Thanks

Thanks
Simon

• This reply was modified 2 years, 8 months ago by Jeriss Cloud Center.

Attachments:

You must be logged in to view attached files.

Hi,

Full height may cause vertical jumps.
Full width may cause horizontal jumps.

Using these options simultaneously may cause the following jumps more visible on page load, but they will occur even if you use one of these options.

The vertical jump on your site is caused by full-height options. We have checked your site and don’t see the custom code that was provided to you earlier.

.vc_row-o-full-height  {
	min-height: 100vh !important;
}

Kind Regards

[Author]

Posts