Skip to content
Storm Menu

Storm News.10.01.2012 - 1 min read

Bug of the Day: Safari / Webkit trying to load gradients as images/URLs

Why is webkit trying to load my -webkit-linear-gradient’s as URLs?

I’ve got the following perfectly acceptable CSS3:

	background-image: -webkit-gradient(linear, left top, left bottom, from(#648087), to(#38484c));
	background-image: -webkit-linear-gradient(top, #648087, #38484c);
	background-image: -moz-linear-gradient(top, #648087, #38484c);
	background-image: -o-linear-gradient(top, #648087, #38484c);
	background-image: -ms-linear-gradient(top, #648087, #38484c);
	background-image: linear-gradient(top, #648087, #38484c);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#648087', EndColorStr='#38484c');

I’ve spent a good 60 minutes this morning trying to find out why it was producing the following output in my ruby server console:

Started GET "/admin/-webkit-linear-gradient(top,%20rgb(100,%20128,%20135),%20rgb(56,%2072,%2076))" for 127.0.0.1 at 2012-01-10 11:43:41 +0000

ActionController::RoutingError (No route matches [GET] "/admin/-webkit-linear-gradient(top,%20rgb(100,%20128,%20135),%20rgb(56,%2072,%2076))"):

Well. It’s a bug, and it’s present in the latest released build of Safari. Safari still renders this fine, but it also tries to load it as an image, which’ll result in weird output in your ruby console, or error log.

It’s fixed in the latest webkit nighties, which should mean its fixed in the next safari build too.

Related news.