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.
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?
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).
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.
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
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.
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
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…