div background-image goes blank on hover in Firefox?

Question

I have an element that should change background-image when someone hovers over it. However, the background images are SVGs as data-uri s.

It works perfectly on Webkit browsers (Chrome, Safari, Opera) and works well on IE.

However, on Firefox, whenever I hover, the image simply goes blank. When I try and fiddle with it by inspecting the element and maybe changing the color or some other unrelated the style, the image magically appears.

What is going wrong here and how can I fix it?

This is my CSS:

.info .comment{
    background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23D9D9D9"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    color: #D9D9D9;
    display: inline-block;
}

.info:hover .comment, .info:visited .comment{
    background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23CCCCCC"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
}

.info:hover {
color:#CCCCCC
}

and my HTML:

<a class="info" href="#">
            <div class="comment" role="img"></div>
            500
            </a>

Answer 1

This happens because order matters when using any pseudo-class . Firefox honors the CSS spec on :visited whereas webkit based browsers will allow since they are more loose when it comes to the spec .

Example in codepen:

http://codepen.io/jonathan/pen/GpVXMN

Same example in jsfiddle:

http://jsfiddle.net/98assuba/1/

You need to make sure you use the pseudo-class :link when using :visited .

Since the spec dictates that :link must come before :visited . So since you are adding it to the same CSS rule as your :hover , then you must add it to the default state of the .info .comment rule.

So add the line .info:link .comment to the same CSS rule as .info .comment

And move .info:visited .comment before .info:hover .comment

.info:link .comment, /* add this line */
.info .comment{
     background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23D9D9D9"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
     background-repeat: no-repeat;
     background-size: contain;
     width: 20px;
     height: 20px;
     color: #D9D9D9;
     display: inline-block;
}

.info:visited .comment, /* add this before :hover */
.info:hover .comment{
     background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23CCCCCC"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
}

.info:hover {
     color:#CCCCCC
}

Taken from the Firefox MDN CSS reference docs for :visited :

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active.

And the W3C Spec for psuedo-class :visited

http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes

So remember to always place the pseudo-class's in a specific order (even if on a different rule for the same element):

LVHA order: :link — :visited — :hover — :active

In other words you could remember the order like this:

L ord V ader's H andle formerly A nakin

Once you use the proper order for pseudo-classes, the browser will render properly consistently.