Fix link rendering in Firefox tumblr.

Added by canonicalmomentum@userstyles, Created: Jul 09, 2015, Updated: Jul 09, 2015
No screenshot

Description:

For some baffling reason, Tumblr has made links in text on your Tumblr dashboard indistinguishable from ordinary text. This fixes it.

More info
So I had a look at how Tumblr renders the line underneath links in posts, that somehow only works in Chrome. And like, just... this is amazing.

There is no margin, or border, text-decoration, or any of the standard ways that CSS provides to draw a line underneath something. Instead, the CSS in question is:

background-color: rgba(68, 68, 68, 0);
background-image: -webkit-linear-gradient(top, rgba(68, 68, 68, 0) 50%, rgba(68, 68, 68, 0.247059) 50%);
background-position: 0px 16.1000003814697px;
background-repeat: repeat-x;
This means that it asks Chrome to draw a gradient, which jumps instantly from transparency to partial opacity part way through. It then positions this gradient so that it’s displaced 16.1000003814697 pixels from the top of the < a > element.

This is the most astonishingly convoluted way to draw a line under something I can imagine. I seriously can’t imagine how they even came up with this idea, let alone what advantage it provides compared to simpler, comprehensible methods. And instead of using basic, fundamental aspects of the box model well-established in CSS, it does this... weird... thing... using a feature that hasn’t yet been introduced into the HTML standard. Then doesn’t even do the necessary copies to make it work for Firefox as well.

So this CSS simply copies Tumblr's weird incomprehensible underlining trick to work with Firefox as well.

Installs:
Applies to:
www.tumblr.com
License:
CC0 1.0 Universal.
canonicalmomentum@userstyles has waived all copyright and related or neighboring rights to Fix link rendering in Firefox tumblr., to the extent allowed by law.

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.