Geek Answers Handbook

CSS CSS data-uri not working in Firefox

So here is what I am trying to do. I have this code in my css file

.form_row .textfield:hover, .textfield_m:hover { background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMCI+DQogIDxkZWZzPg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibXlMaW5lYXJHcmFkaWVudDEiDQogICAgICAgICAgICAgICAgICAgIHgxPSIwJSIgeTE9IjAlIg0KICAgICAgICAgICAgICAgICAgICB4Mj0iMCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIG9mZnNldD0iMCUiICAgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmY1ZjciIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogIDwvZGVmcz4NCg0KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIg0KICAgICBmaWxsPSJ1cmwoI215TGluZWFyR3JhZGllbnQxKSIgLz4NCjwvc3ZnPg==); background-repeat:repeat; background-color:White ; background-clip: border-box; -moz-background-clip: border; -webkit-background-clip: border-box; background-origin: border-box; -moz-background-origin: border; -webkit-background-origin: border-box; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; -khtml-background-size: 100% 100%; background-size: 100% 100%; animation: pulse .75s ease-in-out 0s infinite alternate; -moz-animation:pulse .75s ease-in-out 0s infinite alternate; /*Firefox*/ -webkit-animation:pulse .75s ease-in-out 0s infinite alternate; /*Safari and Chrome*/ -o-animation:pulse .75s ease-in-out 0s infinite alternate; /*Safari and Chrome*/ }

This is in text input.
It works fine in every browser, but it fails with Firefox 5. All I get is black.
You can see what I see here http://www.skylabsonline.com/holy/
Please note that in all other major browsers it displays fine, but in firefox 5 it completely fails.
Any ideas? On

ALSO, here is the SVG code for Base64 above, and I used this site to convert it http://webcodertools.com/imagetobase64converter , but base64 is always base64.

 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="#feffff" stop-opacity="1"/> <stop offset="100%" stop-color="#d2ebf9" stop-opacity="1"/> </linearGradient> </defs> <rect x="0" y="0" width="1" height="1" fill="url(#myLinearGradient1)" /> </svg>
+7
source share
2 answers

Firefox had a bug fixed in FF6. A hash (#) in the URI data source will split the image.

A # in the content should be escaped as %23 .

References

+17
source

I just had to cast the gradient manually using CSS using something like -moz-gradient-linear ()

+1
source

More articles:


All Articles