Normally when I run into a road block while coding, I can find the solution rather quickly via Google. Most of the time that solution is at stackoverflow. It’s pretty easy to overcome most things this way. However, there are some times when you just run into a problem that few people have talked about online understanding paystubs. That becomes rather frustrating. It reminds me of the days before the internet, or at least before Google, when finding information was much more difficult. We take that for granted a lot these days.
Hopefully this post will find it’s way to the top of Google search results for some of the keywords I used in my searches. One example is the following error I was seeing when I inspected the element in Safari.
Failed to load resource: The operation couldn’t be completed. (kCFErrorDomainCFNetwork error -10.)
You see I had a chevron icon added to a custom select box in a web site I’m working on. The chevron icon showed up in every browser except for Safari. Safari just complained that it couldn’t load the image. Here’s the exact CSS I used for the image:
{ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAI3AAACNwH3BkTCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAB5QTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhow4rQAAAAp0Uk5TABUcLTJHSLju+FWeOqcAAAA8SURBVAhbY2AgBiiCCCEgrnBgYGBpBzIiWxgYPKYCGWwzHFg6E0DymS0e08Cq2WZABIBC06AGMBswEAcAs7AJgLl9xCcAAAAASUVORK5CYII8f334b553cdd5aeff8fb47bae1fe9ead') no-repeat 95% 55%; } |
It worked fine in every browser (including IE mind you) except for Safari.
I’ll cut to the chase. Base64 requires the number of characters in the encoded string to be divisible by 3. If you count all the characters starting with “iVBORw0KG…” all the way to “e1fe9ead”, you’ll see that the base64 string is 371 characters long. I remember that I got this chevron and the base64 encoded css directly from a website which automatically encoded the image for me. 371 isn’t divisible by 3 evenly. However, 372 is. The solution to this problem is to pad your string at the end. I added an equal sign (=) to the end of the string, making it 372 characters long total. Now Safari likes it. Hope that helps. If you are having this same issue, you’ll either need to add one or two equal signs, whichever amount makes the total character count divisible by 3.