Sliding elements now showing before reloading page

[christian3]

Hi.

I’m making a site for a client, but there seems to be some troubles on the frontpage. Please take at look at the attached screenshot. The elements marked with the red isn’t showing the first time the page is loaded. But if you reload the page it seems fine.

Url: http://nokassor.idehus.net/
Wordpress: v4.9.5
Pro: v2.0.4

Look forward to hear from you.

Regards Christian

[thai]

Hi There,

I couldn’t replicate this issue on my Chrome & Window 8.1, the elements are sliding just fine.

Could you please send us a screencast(http://www.screencast.com/), also tell us which browsers and OS you’re using ?

Thank you.

[christian3]

Hi.

Thanks for your reply!

I’m using Firefox v59.0.2 and MacOs 10.11.6. Please see screendump below. It’s all blank.

Regards Christian

[Alaa]

Hi,

I can reproduce this behavior using Firefox on MacOS, that’s really weird behavior that I can’t understand, however, here is my suggested workaround:

• Add custom classes to these sections as pointed in this screenshot:

it’s simply, selectedSection for the last section, and sectionBefore to the previous large one.

• Then please add this JS snippet to (Pro > Theme Options > JS):

jQuery( document ).ready(function($) {
    jQuery('.selectedSection').clone().addClass('hidePlease').insertAfter('.sectionBefore');
});

• Then add this CSS snippet to (Pro > Theme Options > CSS):

.hidePlease {
    display: none;
}

That should resolve this issue.
Thanks.

[christian3]

Hi.

Thanks for your tips, but it doesn’t seem to resolve the issue after adding the code. The section is still not visible when loading the page the first time.

But I think I’ve found what somehow causes the issue. When I remove the element publishing the Revolution Slider the elements below works fine. Take a look at the screenshot below for the element I’m referring to.

Is there a good explanation to this?

Regards Christian

[Alaa]

Hi Christian,

I thought it has something to do with the page height and Firefox on Mac not being able to detect that this exact last div area is reached while scrolling because it’s the last one (user needs to scroll more to reveal this last section content), I confirmed this hypothesis by increasing the footer height in Firefox inspector, then scrolled down the page and the contents appeared fine. That’s why I thought about the CSS/JS solution I mentioned above as it simply creates another copy of the last div area and append it to a previous div area so users will simply trigger it while scrolling. (the cloned div is hidden by CSS so no one would see it).

To allow us taking a closer look at this issue, could you please provide us with WordPress Dashboard login details in a “Secure Note” so we can investigate this issue?

Thanks.

[christian3]

Hi.

Thanks for your effort! I’ve sent you the login details.

Regards Christian

[Alaa]

Hi Christian,

The problem is that the bottom section can’t be easily detected by the browser that it’s in the middle of the view, I can see this has been logged to our dev team for further improvement, however I don’t have an ETA for the update that might address this point for now.

With that said, I’ve applied another workaround for this issue on your website which I believe it’s working fine, that’s what I’ve done:

• Added custom class selectedSection to the bottom section.
• Added this JS code to Page Content JS section:

JQuery( document ).ready(function($) {
  $(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    	$('.selectedSection .x-column').addClass('moveit');
    }
  });
});

• Added this CSS snippet to the Page Content CSS section:

.moveit{
  opacity: 1!important;
  transform: translate(0px, 0px)!important;
  transition-duration: 1.5s!important;
}

Could you please recheck that now and let me know how it goes?

Thanks.

[christian3]

Hi.

Thanks a lot! Now it seems to be working fine

And thanks again for your support!

Regards Christian

[lely]

Glad this is now sorted out Christian.

For more guidance, feel free to visit our knowledge base here.