cssbase64internet-explorer-9mouse-cursor

Base64 encoded image in CSS for cursor not working in IE8, IE9

I encoded a "open hand" pointer with Base64 and embedded in the definition of a class in my css

.cursor-hand
{
    cursor:url(data:image/bmp;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8=), default;
}

Unfortunately it doesn't work in IE8, IE9

Tried in latest Safari, Firefox (Win/Mac), Chrome (Win/Mac) and works perfectly.

To fix it I tried to change the data type (image/x-icon, image-image/vnd.microsoft.icon,...)

I tried to to URL encode with % the string in order escape / + = but nothing changed.

However, as what I found here it should work

http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx

The only way I can get the open-hand cursor is storing it into a file...

.cursor-hand
{
    cursor:url(pathto/hand.cur), default;
}

...but I want to avoid that since it's a very small file and I'm working on making requests the minimum possible.

Solution

  • Seems like a limitation of IE.

    The following talks about the data: URI and IE http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx

    (same link you looked at)

    The part of interest is:

    Data URIs are supported only for the following elements and/or attributes. object (images only) img input type=image link CSS declarations that accept a URL, such as background, backgroundImage, and so on

    Just to demonstrate further - the Codepen http://codepen.io/anon/pen/thndu

    If you look at that with Chrome - works, with IE... not so much. Interestingly the <img> also doesn't like the bmp in IE, but Chrome is ok!