title: SVG filter not showing up in Firefox, working fine in Chrome
body: <p>I want a piece of dark text on dark background to have a white glow outside of it. Although the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()_2" rel="nofollow noreferrer">default drop shadow filter</a> in CSS (like <code>filter: drop-shadow(2px 2px 2px black)</code>) officially should support a 'spread-radius' fourth attribute, support for this attribute is basically non-existent. Without this extra spread, the drop shadow will not be big enough to allow the text to be read.</p>
  
  <p>So, I decided to define my own filter in an SVG tag, including a dilation operation to implement the extra spread, and apply that to the text instead. This filter works fine in Chrome, but causes the text to become entirely invisible in Firefox (both tested under Ubuntu 14.04). According to <a href="http://caniuse.com/#search=filter" rel="nofollow noreferrer">caniuse.com</a> (usually very reliable, I've found), Firefox should support the filter perfectly fine.</p>
  
  <p>The HTML code with SVG filter:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;defs&gt;
  
  &lt;filter id="my-drop-shadow" x="0" y="0" width="200%" height="200%"&gt;
  
      &lt;feColorMatrix type="matrix" values=
                  "0 0 0 0   1
                   0 0 0 0   1
                   0 0 0 0   1
                   0 0 0 1   0"/&gt;
      &lt;feMorphology operator="dilate" radius="2" /&gt;
      &lt;feGaussianBlur stdDeviation="2" in="coloredOut" result="coloredBlur"/&gt;
      &lt;feMerge&gt;
          &lt;feMergeNode in="coloredBlur"/&gt;
          &lt;feMergeNode in="SourceGraphic"/&gt;
      &lt;/feMerge&gt;
  
  &lt;/filter&gt;
  
  &lt;/defs&gt;
  &lt;/svg&gt;
  
  &lt;p&gt;Hello there.&lt;/p&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>body {
      color: #000; background: #002;
      font-family: serif; font-size: 30px;
      font-weight: bold;
  }
  
  p {
      -webkit-filter: url(#my-drop-shadow);
      filter: url(#my-drop-shadow);
  }
  </code></pre>
  
  <p>Result on Chrome (version 46.0.2490.80 (64-bit)):</p>
  
  <p><a href="https://i.stack.imgur.com/LCtlJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LCtlJ.png" alt="Result on Chrome"></a></p>
  
  <p>Result on Firefox (version 42.0):</p>
  
  <p><a href="https://i.stack.imgur.com/BNPKA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BNPKA.png" alt="Result on Firefox"></a></p>
  
  <p>I've put the code above in a <a href="http://codepen.io/anon/pen/XmoKJJ" rel="nofollow noreferrer">working CodePen</a> (edit: note that I've now updated the CodePen to reflect @RobertLongson's answer and it works; see below though for why this was not the full answer).</p>
  
  <p>Any ideas? Typo I haven't spotted in my SVG code?</p>