I ran into a frustrating one recently while building a hero section for an agency project. The de...I ran into a frustrating one recently while building a hero section for an agency project. The de...
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
I ran into a frustrating one recently while building a hero section for an agency project. The design called for a transparent background video. Looked perfect on Chrome. Clean, crisp, exactly what the designer intended. Then I checked it on iOS Safari. Massive black box. The entire transparent video just rendered as a solid black rectangle. I tried exporting different WebM encodings. Tried fallback background colours. Tried CSS mix-blend-mode hacks. Even checked if it was a strict iOS autoplay restriction. Nothing worked. Turns out Safari flat out refuses to support WebM alpha channels. For transparent video on Apple devices, it demands HEVC encoding with an alpha channel, served in a QuickTime container. Re-encoded the video, added it as a fallback source alongside the WebM, and it worked immediately.
Post image
Furkan's avatar
This is exactly the kind of cross-browser issue that looks trivial until it blocks the whole visual concept. Sharing the Safari-specific failure mode and workaround would make a very useful technical follow-up.
Back to feed
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