Hi there,
i have a problem with the offset for the scroll effects. If I set the bottom offset to 10%, right in the editor the offset works great, but in the frontend, as a visitor, the elements come in way to late. I would need to use a negative offset value to make it look correct. But as I said, in the Editor it works a s it should.
Here is the link to the page where I have set-up the scroll effects: https://www.soelvahof.com/hof/weinbau/
I already cleared all cached files.
Hey @xoa,
The offset works fine on my end.
What browser are you using and what is your browser size. If you’re not sure how to get that, visit https://supportally.com/ and give us the details.
Please also try out other browsers and their incognito mode then tell us the result.
Thanks.
@christian Thanks for your reply.
But according to my setting, the elements, in this case the headlight seen on your screenshot should fade in way earlier.
Browser is Safari 14.1.1
Browser Size|1680 x 876|
Screen Size|1680 x 1050|
EDIT: I noticed that, at first the offset is not working correctly, but as soon as I change the width or height of the browser, even it’s just 1 px of my screen, the offset “triggers” correctly.
Hello @xoa,
Please test the page in Firefox, Chrome, or MS Edge browser. Also, make sure that you are not logged in. If possible, you use the private browsing mode.
Kindly let us know how it goes.
I tried all your suggestions, but the problem is exactly the same in Safari and Chrome. I have been logged out and used incognito mode.
With the offset I set, it should fade in much earlier. But it seems not working. Maybe rem is not the unit I should use?
That said, it seems to work much better on mobile. (Safari)
Hi @xoa,
I have checked the website and found the content is loading perfectly fine. I have checked by logging in and without logged in, the result was the same.
If you are still facing the same issue, I would suggest you check once by clearing all types of cache and in the incognito/private mode of the browser.
Hope that helps.
Thanks
For my taste, the elements are entering still way too late even with 0% offset. Also tried on chrome and incognito mode.
Hi Daniel,
From 10% offset try to subtract the height of the sticky header.
e.g. [calc(10% - 138px)]
Hope it helps,
Thanks @friech
But unfortunately it does not work. When I enter calc(10% - 138px) the offset set’s itself back to 10% only as soon as I leave the effects panel.
Hi @xoa,
Regretfully, the issue you described can’t be replicated, I would request you to make a screen capturing video for us to understand what exactly you are seeing at your end.
I would also suggest you disable the Scroll transformation temporarily for the page and check if that resolves the issue, if that is the case please mention the device, browser name and version, and also operating system you are using, that helps us to replicate the issue at our end.
Thanks
Thanks for getting back to me.
As requested, I made a screen capture video to demonstrate you the problem.
Here is the link: http://www.danielsoelva.com/themeco/Screen_capture_themeco.mov
At first you see the big gaps and how far I need to scroll for the content to fade in (offset 10%), 0% does not change much or anything noticable.
(as you can see, there is still also the sticky header problem I’m unable to resolve when scrolling)
Then I refresh the page and change the browser-window size by just a tiny bit. As you can see, after that, suddenly the content fades in much earlier as it would be correct for the 10% offset.
I hope this helps.
Hi Daniel,
I tried to change the offset to 0% and I see a difference between 0% and 10%. When I set the offset the 0% the content will show up on the 3rd scroll from top to bottom then while using 10%, it will need the 4th scroll from top to bottom to show up the content. With that said, I advise that you decrease the offset from 10% to 0% to find the exact value needed for your content to be shown.
Hope that helps and let us know how it goes.
Thank you.
@marc_a
An offset of 0% is indeed a bit better but still not enough.
But coming back to the attempt by @friech
I tried to reduce the size of the sticky header by 3em (2.6em instead of 5.6em) and it does indeed help a lot and would fix the issue completely. So this problem is related to the sticky header, which will not be excluded by the offset calculation for the scroll effect.
Hi Daniel,
We’re glad that you were able to figure it out and thanks for sharing your idea. If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.
Thank you.
So this will be included in one of the upcoming releases? Because now we know the problem, but a solution on how to fix it without reducing the sticky header height is still missing.
Hey @xoa,
I’m yet to post this in our issue tracker once I’ve replicated the issue so this will be queued for investigation by our development team. We couldn’t say if this is a bug or not so we couldn’t tell if a fix will be included or you really need to balance out the sticky header’s height with the offset.
My theory is the sticky headers’ position is Relative and a Relative element takes up space and when the Offsets are calculated, the height of the Relative Bars are included.
Thanks.
Ok, I will check this in the meantime.
Hi Daniel,
Great! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.
Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
