Parallax image jumps after loading

[JenniferS]

I am using a parallax section as a header on my pages. It’s a classic section. When the page first loads, the image is shown somewhere right around the center, then it jumps to align the image to the top. I’m using Firefox Developer browser. Can you assist me? I’d like it to stay near the center of the image but definitely need to stop the jumping around after loading the page. For example: http://kum.jenwilton.com/programs/specialty-programs/

TIA for your help.

[friech]

Hi @jlswilton,

Thank you for writing in, that is happening because of the page delayed to execute the parallax effect. To resolve that, please add this to your Section’s Style field.

background-position: 50% 26px;

Cheers!

[JenniferS]

Thanks, that helped a bit. It still jumps, and doesn’t start in the middle of the image (vertically). For example, on the page : http://kum.jenwilton.com/programs/ , the center of the children’s hands is the exact middle of the image, but that middle point is showing at the very bottom of the section when the page loads. The image is quite a bit larger than the section it is in, so there should be plenty of room for the parallax to move and still have the image centered in the frame. Is there a way to adjust this?

[christian]

Hey @jlswilton,

It’s weird that the vertical background-position powered by X parallax script jumps by about 8px when you scroll fast. If you scroll really slow, it doesn’t jump. Would you please mind updating X and Cornerstone first to see if this will improve. Please also try deactivating third-party plugins especially plugins related to scrolling.

If the issue persists after updating, please give us your site’s WordPress Login URL, Username and Password in Secure Note.

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

Thanks.

[JenniferS]

I have deactivated everything and will send login in a secure note. I ended up making the section larger, which helps in the short term, but I’m frustrated that this is happening. Some of the sections lower on the pages do not seem to have this issue.

[ruenel]

Hello @jlswilton,

I have checked your site and I could no longer replicate the issue.
When I view the page, I am seeing this:

The hands were perfectly placed in the middle of the page. As soon as a scroll away, it will be at the bottom of the section as shown below:

Please clear your browser cache or use private browsing mode and test your page again.

[JenniferS]

It only changed because I made the section larger. I could not figure out how to move the image and needed it to work. If I make the section smaller again, the image does not center the way it should.

[friech]

Hi @jlswilton,

I’ve tested your page template on my dev site and the issue is not happening. Your site is very slow to deliver the resources (images and js) so the parallax effect is getting delayed.

Please follow a couple of site’s performance optimization we provided here.

Thanks,