Research: Letting clicks through the transparent part of the GitHub ribbon

While I was working to de-uglify one of my GitHub pages (no time to prettify yet), I noticed that, the more fluid I made the layout, the more likely it was that the “Fork me” ribbon would cover up my most visible download buttons.

Obviously, this needs to be fixed, but according to what I could search up, there’s no general solution for clicking through the transparent parts of a PNG. However, given that the ribbon doesn’t necessarily have to be a PNG and that it’s not something like a frame with clear stuff in the center to be clicked through, there may be a specific solution.

None of the ones I’ve found are perfect, but here’s my research so far:

pointer-events

This nifty little property does exactly what I want… but only with an SVG image (For PNGs, it’s an all-or-nothing deal) and it’s apparently only implemented for HTML in Webkit and Gecko-based browsers.

CSS transform

This has actually been done (and since that was written, Opera 10.50 added support for it via the -o- vendor prefix) and you could probably use a polyfill like Transformie or cssSandpaper to make it work on Internet Explorer, but Firefox 6 and below on Linux don’t anti-alias it, so it looks awful. (I haven’t tested Firefox 7+ yet)

CSS clip and border-radius

This is paradoxically the best and worst for graceful degradation, not to mention being a less than ideal solution.If you use clip on your “position: absolute” container to shave off as much whitespace as you can without noticeably affecting the shadow in the PNG, and then use large values of border-radius on the image itself for the bottom-left and top-right corners, you can shave off a pretty respectable amount of the clickable region… but only in Gecko-based browsers (Firefox, SeaMonkey, Fennec, etc.). It turns out that, in other rendering engines, border-radius is a purely visual thing.

Anyway, that’s all I’ve found so far. If anyone has any further suggestions, leave them in the comments and I’ll work them into the post with credit.

Research: Letting clicks through the transparent part of the GitHub ribbon by Stephan Sokolow is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.