Randomly (dis)appearing SVG bullet points

Question

While trying to add some nice SVG images as bullet points for my site, I came across some real strange behaviour and what appears to be a bug in Firefox. I've debugged it to the following MWE:

Source code

I have the following HTML document:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        ul {
            list-style-image: url('listImage.svg');
        }
        </style>
    </head>
    <body>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </body>
</html>

I also have the following SVG file called listImage.svg:

<svg  xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="0" cy="0" r="4" />
    </g>
</svg>

The problem

When I open the HTML document in Firefox, the list appears as it should, with the SVG nicely appearing as the bullet point of the list:

But when I refresh the page or reload the page, they sometimes disappear:

While refreshing the page, the images seemingly random keep appearing and disappearing again. Doing a hard refresh instead (with Ctrl + F5) or deleting the cache and offline website data doesn't change this.

Specific browsers

This problem is only happening in Firefox

Firefox Quantum 65.0 (64-bits)
Firefox Developer Edition 66.0b4 (64-bits)

In other browsers I did not have any problems, the images always appeared.

Internet Explorer 11
    Version: 11.523.17134.0
    Updateversions: 11.0.105 (KB4480965)
Edge
    42.17134.1.0
    Microsoft EdgeHTML 17.17134

(If someone could provide information about Google Chrome, please edit and add it to the question. I used some online tool and the results of that suggest that the SVG appears fine in Google Chrome, however I don't think this test is solid proof for it)

Why is this happening?

Related questions

I found this question that might be related, however this question is different since I'm only having this issue in Firefox and the answer(s) to that question have not solved my problem.

https://jsfiddle.net/L41a3fdc/ works in chrome(Version 71.0.3578.98 (Official Build) (64-bit)), FF Dev Ed 66.0b2 BUT actually in FF QUANTUM 64.0.2 (64-bit), if you click RUN, the bullets disappear.... — Vickel, Feb 04 '19 at 23:53
I digged in a bit deeper and found out: your svg-image has neither width nor height defined, doing so resolves the problem, see updated answer — Vickel, Feb 07 '19 at 19:05

Vickel · Accepted Answer · 2019-02-07T19:03:33.217

I cannot answer on the behavior in FF Dev Ed 66.0b2 but there is a work around to get the pretended result looking nice in FF and Chrome (not tested with Edge or Safari):

use the svg background image in your li tag instead of the ul list-style-image. Set this background's position and add a padding to the li

ul {
  list-style-type: none;
  margin-left: -20px;
}

li {
  background-image: url('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg');
  background-repeat: no-repeat;
  background-position: 0px 6px;
  padding-left: 20px;
  background-size: 5px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

this is the corresponding fiddle

edit: as I wrote in my comment, *.gif files behave as expected in FF and Chrome, check this fiddle. Therefore an alternative answer would be:

keep your code, just convert the svg into gif

UPDATE: your svg-image has neither width nor height defined, doing so resolves the problem:

<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="0" cy="0" r="4" />
    </g>
</svg>

check: https://jsfiddle.net/zf1hjrav/

Ah. Good to know that it is because of the missing height and width attributes. The reason this happend is because I started with some SVG generated by Adobe Illustrator and kept removing unncecassry code till I got the barebone that gave no errors. I used that to make the SVG from code myself. — Bassie-c, Feb 07 '19 at 22:43

Randomly (dis)appearing SVG bullet points

Source code

The problem

Specific browsers

Why is this happening?

1 Answers1