I have a page with several ‘accordion’ style dropdowns. each one reveals a different collection set.
The open/close animations to reveal the accordion content is very jumpy in Safari. But it seems pretty smooth in Chrome.
I also have an issue where if I reveal an accordion item and then resize the browser, the content repositions itself poorly. I don’t know if these issues are connected. But if you are able to look at my site I’d be very appreciative.
The page with the issues is here and the read-only link is below.
Here is my public share link: LINK
(how to access public share link)
hi @Evan_Logan1 try to remove the flex from the div you are opening on interaction. Flex items usually have problem with Safari (My previous experience) and more if you are working with a JS animation.
Try to add a div container inside, that will be the one with the flex settings. But the one that will have the animation, should not be flex but block.
Try that, and let me know!
I will try. thanks so much!
sadly, I’m not seeing a change. I just switched the div that’s being revealed to block.
@Evan_Logan1 I saw you made some changes, but also remember that the class Project Accordian is also on flex, that is the one making the weird movement on Safari. Try to remove the flex settings on this class. (This shouldn’t affect the animation)
Also, move the Project Page Collection Wrapper class into the DIV you created.
And in the interaction New Timed Animation 5 set the height to 100% or a fix height. Auto sometimes gets lost with so many parent containers with different heights in safari.
Let me know if those changes make it better!
Cheers,
I’ve messed something up. The animation is no longer revealing/hiding the collections.
I did each of your suggestions in order. But I’m not sure which step caused it to mess up. I moved the Projects Page Collection Wrapper into a Div called Collection Block
@Evan_Logan1 if you like, shoot me an email to carlosruizdelvizo@gmail.com to see if I can help you with no strings attached.