The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Safari has taught me a few lessons the hard way:
• Not all CSS properties behave the same across browsers
• Flexbox, grid, and animations can act differently
• Mobile Safari brings its own set of challenges
It’s a good reminder that “tested” doesn’t mean tested everywhere. Cross-browser and mobile testing isn’t optional, it’s part of building a reliable user experience.
Laugh now, fix later… or better, test early.😌
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Built an animation system in Webflow powered by GSAP and it completely changed how I build client sites.
As sites grow, animation becomes a nightmare to keep consistent and timing, easing, and interactions start getting duplicated in slightly different ways across sections.
So I stopped building “animations” and started building a system.
Every animated element sits in a parent with a custom attribute like data-animation-parent, then I define animation like stagger, slide, fade, or reveal.
GSAP + ScrollTrigger powers all scroll-based animations across the entire site from a single system, keeping everything consistent and reusable without rebuilding logic per section.
What this fixes:
One unified animation system powering every scroll animation on the site
Never creating the same animation more than once
A consistent animation style from start to finish on every client project
Clean structure that scales without becoming unmanageable
It turns animation from something you constantly rebuild into something that just carries across the entire project.
Systems over one-off work every time.
looks great, Samuel!
Quick note on my process for Design. ID:
Responsiveness was one of my first concerns when I started building. A project like this lives on social media; people share it on their phones, so getting the mobile experience right wasn’t optional, it was the whole point.
The biggest decision was screen 2.
On desktop, it has everything in one place: avatar selector on the left, form on the right, and the character in the middle. It works because there's space for it.
On mobile, that same layout just didn’t hold up, so I split it into two dedicated screens. One for picking your character, and one for filling in your details. Same content, same flow, just given the space it actually needed to breathe.
The same thinking applied to smaller details too.
On desktop, the button below the ID card downloads your card as a JPEG.
On mobile, that same button opens the native share sheet, so you can save it straight to your camera roll or drop it in your stories without any extra steps.
Same button, same output, different behaviour depending on how you are using it.
Check my original post: https://on.contra.com/TmqH6L
How did you guys approach responsiveness on your builds?
Currently working on responsive and modern websites using HTML, CSS, and JavaScript.
I focus on clean UI, fast performance, and mobile-friendly design.
Open to new projects and collaborations.
https://morufusikiru.github.io/my-portfolio/
Trending
FLORA
Reusable workflows are replacing one-off prompts in creative AI. Share what you're building in FLORA.
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
brandguidelines
Brand guidelines are becoming living systems. What are you building for your clients?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
aivideo
AI video tools are moving at warp speed. Which ones are you experimenting with?