title: Svg display probems with column-count property
body: <p>I have a list of blocks I want to display in multiple columns (at least 2 columns).
  In my blocks I have a header with a title and a svg icon.</p>
  
  <p>If I use the css property "column-count" to split content in columns, some svg disapear <strong>on Google Chrome</strong>. (no problem with Firefox)</p>
  
  <p>Here is a demo :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
    width: 500px;
    margin-right: 100px;
    float: left;
  }
  .container {
    border: 1px solid black;
    margin: 0 auto;
    padding: 0.25em;
    margin-top: 1.25em;
  }
  .container.withcolumns {
    column-count: 2;
    column-gap: 2em;
  }
  .block {
    break-inside: avoid-column;
  }
  .block header {
    font-weight: bold;
    padding: 0.5em 0;
    border-bottom: 1px solid grey;
  }
  .block header svg {
    width: 15px;
    height: 15px;
    margin-right: 0.5em;
  }
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  li {
    margin: 0.25em 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
  &lt;h1&gt;First block without columns&lt;/h1&gt;
  &lt;div class='container'&gt;
    &lt;div class='block'&gt;
      &lt;header&gt;
        &lt;svg&gt;&lt;use href="#svg-capacity" xlink:href="#svg-capacity"&gt;&lt;/use&gt;&lt;/svg&gt;
        Block 1&lt;/header&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;  
        &lt;li&gt;Item 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class='block'&gt;
      &lt;header&gt;&lt;svg&gt;&lt;use href="#svg-capacity" xlink:href="#svg-capacity"&gt;&lt;/use&gt;&lt;/svg&gt;Block 2&lt;/header&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
        
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class='block'&gt;
      &lt;header&gt;&lt;svg&gt;&lt;use href="#svg-capacity" xlink:href="#svg-capacity"&gt;&lt;/use&gt;&lt;/svg&gt;Block 3&lt;/header&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;      
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class='block'&gt;
      &lt;header&gt;&lt;svg&gt;&lt;use href="#svg-capacity" xlink:href="#svg-capacity"&gt;&lt;/use&gt;&lt;/svg&gt;Block 4&lt;/header&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
        &lt;li&gt;Item 3&lt;/li&gt;
        &lt;li&gt;Item 4&lt;/li&gt;
        &lt;li&gt;Item 5&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h1&gt;Same code with columns&lt;/h1&gt;
  &lt;div class='container withcolumns'&gt;
    &lt;div class='block'&gt;
      &lt;header&gt;
        &lt;svg&gt;&lt;use href="#svg-capacity" xlink:href="#svg-capacity"&gt;&lt;/use&gt;&lt;/svg&gt;
        Block 1&lt;/header&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;   
        &lt;li&gt;Item 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class='block'&gt;
      &lt;header&gt;&lt;svg&gt;&lt;use href="#svg-capacity" xlink:href="#svg-capacity"&gt;&lt;/use&gt;&lt;/svg&gt;Block 2&lt;/header&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class='block'&gt;
      &lt;header&gt;&lt;svg&gt;&lt;use href="#svg-capacity" xlink:href="#svg-capacity"&gt;&lt;/use&gt;&lt;/svg&gt;Block 3&lt;/header&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;      
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class='block'&gt;
      &lt;header&gt;&lt;svg&gt;&lt;use href="#svg-capacity" xlink:href="#svg-capacity"&gt;&lt;/use&gt;&lt;/svg&gt;Block 4&lt;/header&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
        &lt;li&gt;Item 3&lt;/li&gt;
        &lt;li&gt;Item 4&lt;/li&gt;
        &lt;li&gt;Item 5&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" style="display: none;"&gt;
    &lt;symbol id="svg-capacity" viewBox="0 0 17.293 20"&gt;
      &lt;path d="M2674.323,1341a2.012,2.012,0,1,0-1.437-.575,2,2,0,0,0,1.437.575Zm1.52,1h-3.053a2.012,2.012,0,0,0-2.027,2v5.494h1.52V1357h4.067v-7.507h1.533V1344a2.022,2.022,0,0,0-2.039-2Zm-11.693-1a2,2,0,1,0-2.027-2,2.023,2.023,0,0,0,2.027,2Zm1.52,1h-3.04a2.015,2.015,0,0,0-2.04,2v5.493h1.533V1357h4.067v-7.507h1.52V1344a2.015,2.015,0,0,0-2.04-2Z" transform="translate(-2660.59 -1337)"&gt;&lt;/path&gt;
    &lt;/symbol&gt;  
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does anyone have an idea how to fix this?</p>
  
  <p>Regards</p>