Strange Parralax Background issue (misplaced on load)

Shapely
1

Hi,

so I really love your themes. I do however face a weired issue currently. The small parralax section misplaces the background when the page finished loading and has NOT been scrolled before the page finished loading (everything appears and start from the top).
If I scroll to that parralax section the background is set to low (exactly the height of the top menu bar).

Now I resize he window in anyway (F11, or manually window reiszing, even just a pixel) the background jumps to where it needs to be at. I think the pixel for the “top” css style is being recalcullated when the window is being resized.

This is weired behaviour any idea how I can fix this? Anyone else havig this issue? This is on a new wp install, only Jetset installed as plugin.

I have the issue with and without my custom css.

2

anyone?

I noticed the page actually jumps up when scrolling down so something is off somewhere.

Thanks

3

hi @tinodesigns,

Please give us your website link to check.

Thanks,

Cristian

4

Thanks for the reply. The URL is:
http://clients.tino-designs.com/dr-russ/

I also posted it in this thread (those users seem to have the exact same issue but the solution in that thread is not helping me much): https://colorlibsupport.com/t/line-over-the-main-picture-in-parallax/

Againg thanks for the help.

5

Hi @tinodesigns,

The only thing that I could see on your website is that small line. So, please use this css code to solve it:

section {
       border-style: none;
}

Unfortunately I could not replicate what you are saying in the request.

thanks,

Cristian

6

Hello Cristian,

thank you for your reply but that really won`t solve my issue. The border line is not the problem and I would like to keep it. The only reason the border line looks out of place (it actually is not) is because the background image for the paralax section is out of place (when letting the page load fully and then scrolling down. If you see the border line out of place then it is actually the paralax background image).

I would like to fix the background issue not the border style. If I fix the border style the content in that area still looks out of place. The real issue however is the background that is out of place.

I created two more screenshots that show you that the content is also out of place.

I’m pretty sure by know it has to do with the overlapping top menu and how heights are cacluated by some script when the site is being scrolled (the topmenu should not move upwards at all when scrolling, that is what happens at first, however it should always stay in the same position on top. If it wouldn’t move the content might not jump up and the background wouldn’t be misplaced when scrolling down. ). I would like to fix that or at least be able to turn it off.

Do you understand my issue better now?

I actually think it is a bug of this theme or the paralax section used in the theme. Something is not 100% correctly coded in some place. No critic on your guys work the theme is great, I’m just trying to solve this for my use and everyone else now as well.

Would it help if I created a screenrecording where I outline the issue?
Do you know of any simple screensrecorder?

7

Hi @tinodesigns,

Now is more clear, thank you for your great explanation.

It seems that the padding and the height is influecing that section. Try to solve it with this css code:

.small-screen .top-parallax-section {
    overflow: hidden;
    padding: 200px 0;
    height: 100vh;
}

Thanks,

Cristian

8

Hi Cristian,

thanks but that doesn’t seem to solve the issue, it only resizes the paralax section and the background, but the background still goes into the next section.

Again this issue ONLY comes up when the page is loading BEFORE scrolling. If it is being scrolled during loading or the window is resized after loading the issue disappeaes and the backgroudn pops into its proper place.

I don’t think this is an issue with the CSS but rather an issue or conflict with some JS.

The demo of the shapely theme for example does not have this issue at all but I have seen this on alsmost every users site posted here lately. May be it is a conflict with the latest WP versions?

9

hi @tinodesigns,

I would post this on github as a bug, and we will wait for the developer team to answer.

Thanks,

Cristian

10

Hi Cristian,

thank you, that works for me.

Did you already post it to github or do you need me to do that?

Best,
Tino

11

Hi,

I was able to have the different format logos look well on the Desktop version by modifying the widget-home-client.php,

I could not figure out a way to adjust the logos on mobile devices - they are by default top aligned and do not look very good.

So, I am looking for the code that centers the logos vertically and horizontally for this great theme, on desktop and mobile format……

Thank you.

12

Sorry Guys.

Please disregard my previous post - for some reason, it got displayed here instead of creating a new topic…

Thank you.

13

Hi all, hi Cristian,

I found a workaround to solve. So the issue really is part of the top menu and how it is being fixed (stayin on top) there.

What I did for now is turn that feature off. That also solves the issue with the background misplacing and top and botom bnorders of the parallax sections.
I did that in the file: /themes/shapely/js/shapely-scripts.js

On line 47 and 48 it has an event listerne for scrolling and the function updateNav(). Just comment these two lines out like this:
//window.addEventListener(“scroll”, updateNav, false);
//updateNav();

That will stop the breaking issues, however it currently will also NOT show the navigation on top.
I might fix that at a later point and will let you know the fix if I find it.

Best,
Tino

14

Hi @tinodesigns,

Thank you for your contribution,

Cristian