@Brando I’m experiencing a bug concerning my animated fixed Footer on refresh. Please see the video below:
https://www.screenmailer.com/v/a2MviPzh0t7oxWc
Any suggestions? Is this a bug, or did I use any wrong settings?
Thanks a lot in advance.
Best,
Jens
Here is my site Read-Only: https://preview.webflow.com/preview/asome?preview=eb4200f3a872dd397cc6d8a9f1a6df35]
(how to share your site Read-Only link)
Hi @jensvahle
Thanks so much for posting about this issue.
I’ve done some more testing on this end and it looks like this weird glitch only happens when the interaction is affecting the symbol. Once you unlink the symbol the glitch won’t happen.
For now, can you please unlink your symbol? Alternatively you can restructure this section a bit to not include an initial state. To do this, select the footer element and use the style panel to add a 180px transform along the Y axis, then remove the initial state.
I’ve reported the issue to the team and we’ll definitely look into this further and start looking for a solution. I’ll post back here when I have more details for you.
Hi @Brando
thanks for your quick response. Unlinking the symbol worked out, but I’m experiencing the same glitch on mobile (using the smartphone). How do I add the 180px transform along the Y axis? Will this also fix the issue for mobile?
Thanks again.
Best,
Jens
Hi Jens,
Yes unlinking the symbol should work on mobile. Please be sure to clear out your cache, or test in incognito mode on mobile.
Then let me know if you still see the glitch.
Hi @Brando
I’m still having the glitch. You need to check on your phone in order to recreate.
Footer is unlinked.
I’m testing on an iPhone 8+ but the site loads as expected with no footer glitch in both Safari and Chrome. If you are seeing other behavior on your end, can you send me a screen recording of what you see (CloudApp or Quicktime work well).
Hi @Brando,
sorry, can you also look into this one again? I’m still experiencing this glitch
Thanks a lot.
Best,
Jens
Hey @jensvahle!
The http://aasome.webflow.io/ link does not work for me as it returns 404 
Does the issue persist? Can we help here somehow?
Cheers,
Bart
@bart sorry, yes I changed it to: http://asome.webflow.io/
https://preview.webflow.com/preview/asome?preview=eb4200f3a872dd397cc6d8a9f1a6df35
The issue persist.
Thanks for looking into this.
Best,
Jens
I can’t reproduce that on my end at all
On the other hand I know what’s causing it on your end. Interactions you’re using are “coming” with .js file that, while the styling comes with a .css file. When the website loads it “reads” the .html file from the top to the bottom and load necessary stuff “as it goes”. Your styling for the footer is that it’s expanded, entirely visible. Same as what you have in the Designer.
Then it loads the .js file and processes through it making the Interaction “initial” setting to kick in and actually hiding the footer.
Keep in mind that processing power of the CSS and JS files, the speed it has to process it, is based on the machine. The slower the machine is, to longer it takes to process data. While everything happens under just a few miliseconds, it can be noticable sometimes 
Recommendation for a fix:
Go to the Designer, and set the initial styling of the item as if it was already collapsed. That way CSS that kicks in first will render the footer properly. Make sure to update Interactions so they take that into account tho
Let us know if that helped 
Cheers,
Bart
Hi @bart
I just watched your video and it’s not about refreshing the site anymore. That’s all good. The issue appears while clicking the Footer on mobile. Could you look into this one more time. I’d like to finish up this project, just having this issue and one other Safari issue that needs be to resolved and it’s good to go.
https://preview.webflow.com/preview/asome?preview=eb4200f3a872dd397cc6d8a9f1a6df35
Hey @jensvahle
Wait, what’s the issue with the footer…? All works fine. The shading that happens when you press the div is actually only happening on the Safari on iOS. If you try Chrome it works fine. That’s the browser-specific problem and is outside of our possibilities to manage it.
Let me know if that’s what the problem is.
Cheers,
Bart
Ok, just fixed it myself.
Out of curiosity - what was the problem and how did you fix it? I’d love to improve for posterity
@bart I didn’t fix it completely.
Issue:
The issue appears while clicking the Footer on mobile, as you can see in this video:
When I click the footer in order to unfold some more information, the glitch appears right in the moment I click it. Then after the glitch it behaves as it should and moves up. Closing the footer triggers the same issue again though.
Solution:
I recognized that when clicking the “Some” image within the footer, this glitch didn’t happen, so I’ve added some placeholder white images for all the white space in the footer, please see the screenshot below. Clicking the text elements below still triggers the glitch though…
Now that you have this information, can you think of a better solution that works for the whole footer?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
