When I start a project, I like to tackle the parts that are new to me first. Obviously, I enjoy the dopamine hit from exploring something unfamiliar, but also, I’ve found that this is a great way to catch “gotchas” early, rather than waiting until the end when work-arounds might require substancial changes to parts of the code that would otherwise be more pedestrian.
With that approach in mind, I’ve spent a ridiculous amount of the last couple weeks hacking on a circular mask transition effect. I’d gotten this to work fine in the past for image content, but I wanted to be sure it would support other types of content too—a video player for instance. Ideally, I’d end up with a jQuery effect that could handle an arbitrary <div>. It should work on the latest version of any browser (and degrade gracefully in IE7/8).
This has proved itself a challenge several orders of magnitude larger than I’d expected.
The Big Deal
Perhaps the HTML spec isn’t as clear as it ought to be: if you specify overflow: hidden, the clipping region should take border-radius into account. Firefox and IE9 do. That leaves a whole lot of everything else. As long as your content is an image, you can apply a border-radius to that, and the clipping looks OK as long as the image is square (IE7/8 notwithstanding). But you can’t properly offset the image in its container (we’ll get to why we need that eventually) unless you apply the image as a background.
In the interest of moving forward, I’m going to use the background-image technique, but that isn’t going to help for videos etc. I also evaluated webkit-mask-image (webkit-only obviously) and using a canvas buffer (doesn’t seem to work in Safari). Now, if you’re paying attention, a combination of all-of-the-above would let us support all browsers, but I’m calling “scope creep” and deferring this to version 1.1. In the meantime, I’ll probably use a lightbox for videos.
Speaking of which, multiple commercial projects are conflicting with my original release schedule. June 1 is going to come and go, so I’m setting a new goal of July 1.
I’m not doing so well keeping to the hourly budget either. I burned through the original estimate just trying to get this effect working (everywhere). I’d originally estimated 3 hours and spent closer to 30. Ouch!
Like I said, warts and all.
Next time I’ll show the sunburst background (a canvas-based effect) and the aforementioned circular mask (of doom) with compound borders. I already have this working, but I want to clean up the code before doing a write-up.