Question 174283 in Html Question posted in
Some basic documentation can be found here.

Html – Portions of inline SVG not rendering in Firefox until selected or re-scrolled

I have some inline SVG elements exported from PlantUML on a web page. They display properly in Chrome, Edge, and Safari on iOS, but in Firefox parts of them will sometimes not render until I either select them or scroll them off the page and back on. This also does not occur if I include the SVG using an <img> tag, but this doesn’t render properly in Safari.

The SVGs have a "width" attribute, as suggested here: Rendering inline SVG in firefox

Example:

enter image description here

enter image description here

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="58px" preserveAspectRatio="none" style="width:105px;height:58px;background:#00000000;" version="1.1" viewBox="0 0 105 58" width="105px" zoomAndPan="magnify">
<defs>
    <filter height="300%" id="fd8xeq7sn9ue2" width="300%" x="-1" y="-1">
    <feGaussianBlur result="blurOut" stdDeviation="2.0"/>
    <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
    <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
    <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
    </filter>
</defs>
<g>
<!--MD5=[3c439da1e0ca43de06b2478d62879606]
entity ListDog-->
    <g id="elem_ListDog">
    <rect fill="#FEFECE" filter="url(#fd8xeq7sn9ue2)" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="7" y="7"/>
    <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="64" x="17" y="31.5332">List&lt;Dog&gt;</text>
    </g>
</g>
</svg>

This is the CSS I am using to resize and center it in the page. The <svg> element is embedded within a <figure> element.

figure.figure {
    max-width: 100%;
    margin: 1rem auto;
    margin: auto;
}

figure.figure svg,
figure.figure img {
    display: block;
    max-width: 100%;
    margin: auto;
    height: auto !important;
}

Full HTML sample:

<figure class="figure">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="58px" preserveAspectRatio="none" style="width:105px;height:58px;background:#00000000;" version="1.1" viewBox="0 0 105 58" width="105px" zoomAndPan="magnify">
<defs>
    <filter height="300%" id="fd8xeq7sn9ue2" width="300%" x="-1" y="-1">
    <feGaussianBlur result="blurOut" stdDeviation="2.0"/>
    <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
    <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
    <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
    </filter>
</defs>
<g>
<!--MD5=[3c439da1e0ca43de06b2478d62879606]
entity ListDog-->
    <g id="elem_ListDog">
    <rect fill="#FEFECE" filter="url(#fd8xeq7sn9ue2)" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="7" y="7"/>
    <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="64" x="17" y="31.5332">List&lt;Dog&gt;</text>
    </g>
</g>
</svg>


<figcaption>
    Possible Datapaths
    <span class="sources">
        <a class="source" href="DataPaths.plantuml" target="_blank" title="Click to download figure source code.">(Source)</a>
        <a class="source" href="DataPaths.svg" target="_blank" title="Click to download embedded SVG figure.">(Download)</a>
    </span>
</figcaption>
</figure>

Update: it appears to be related to shadowing. I removed the shadowing on the box with skinparam Shadowing false and the issue went away. I would prefer to keep shadowing if possible, but it’s a lead.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" height="449px" preserveAspectRatio="none" style="width:1280px;height:449px;background:#00000000;" version="1.1" viewBox="0 0 1280 449" width="1280px" zoomAndPan="magnify">
  <defs/>
    <g id="elem_ListDog">
      <rect fill="#FEFECE" height="37.6094" style="stroke:#000000;stroke-width:1.5;" width="84" x="521" y="29"/>
      <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="64" x="531" y="53.5332">List&lt;Dog&gt;</text>
    </g>
</svg>
Tags:

2

Answers


  1. 0

    I wasn’t able to reproduce this bug, but maybe swapping the SVG filter for a CSS filter helps:

    rect, ellipse {
  filter: drop-shadow(4px 4px 2px #0006);
}
    Login or Signup to reply.
  2. 0

    While I can’t reproduce the problem, one thing stands out: The <filter> element mixes unitless numbers and percentages for sizing the filter effects region. Theoretically they should be equipotent, but maybe it helps to make them match. Try either setting the x and y attributes to "-100%", or the width and height to "3".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search