Search code examples
csssafarisvg-filters

Text not rendered on Safari when applied with custom SVG filter via CSS


I wrote a custom SVG filter to draw strokes around text and icons. The filter is then referred in the CSS stylesheet. The following code renders as expected in Chrome and Firefox, but it hides the content entirely on Safari.

Did I miss anything in the filter definition?

.text {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 3rem;
  filter: url(#filter);
  color: #0044aa;
}
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" style="position: absolute; visibility: hidden;">
  <filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feMorphology operator="dilate" radius="3 3" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="morphology"/>
      <feFlood flood-color="#ff8822" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="flood"/>
      <feComposite in="flood" in2="morphology" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite2"/>
      <feMerge x="0%" y="0%" width="100%" height="100%" result="merge">
          <feMergeNode in="composite2"/>
          <feMergeNode in="SourceGraphic"/>
      </feMerge>
  </filter>
</svg>
<div class="text">
    Lorem ipsum
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKAgMAAAAfnkwQAAAAA3NCSVQICAjb4U/gAAAACVBMVEX///8kUmQkUmTp7WYpAAAAA3RSTlMAu//QRVwgAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M0BrLToAAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOC8xMi8xMKNAeX0AAAAnSURBVAiZY2BgDGFgYEhhEHWcwiDA5sIgIMnAICACxAwOcCwa6gAATVoD5WIuD5EAAAAASUVORK5CYII=" />
</div>


Solution

  • Removing all the x, y, width, and height attributes from the filter nodes did the trick. Thanks @Kaiido for the comment!

    .text {
      font-family: sans-serif;
      font-weight: 700;
      font-size: 3rem;
      filter: url(#filter);
      color: #0044aa;
    }
    <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" style="position: absolute; visibility: hidden;">
      <filter id="filter" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feMorphology operator="dilate" radius="3 3" in="SourceGraphic" result="morphology"/>
          <feFlood flood-color="#ff8822" flood-opacity="1" result="flood"/>
          <feComposite in="flood" in2="morphology" operator="in" result="composite2"/>
          <feMerge result="merge">
              <feMergeNode in="composite2"/>
              <feMergeNode in="SourceGraphic"/>
          </feMerge>
      </filter>
    </svg>
    <div class="text">
      Lorem ipsum
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKAgMAAAAfnkwQAAAAA3NCSVQICAjb4U/gAAAACVBMVEX///8kUmQkUmTp7WYpAAAAA3RSTlMAu//QRVwgAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M0BrLToAAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOC8xMi8xMKNAeX0AAAAnSURBVAiZY2BgDGFgYEhhEHWcwiDA5sIgIMnAICACxAwOcCwa6gAATVoD5WIuD5EAAAAASUVORK5CYII="
      />
    </div>