CODEWITHSUNDEEP
htmlcsssvgmultiple-columns
Rémy
Rémy

Reputation: 908

Svg display probems with column-count property

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.

If I use the css property "column-count" to split content in columns, some svg disapear on Google Chrome. (no problem with Firefox)

Here is a demo :

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;
}
<section>
<h1>First block without columns</h1>
<div class='container'>
  <div class='block'>
    <header>
      <svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>  
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
</div>
</section>
<section>
  <h1>Same code with columns</h1>
<div class='container withcolumns'>
  <div class='block'>
    <header>
      <svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>   
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  </section>
</div>
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="svg-capacity" viewBox="0 0 17.293 20">
    <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)"></path>
  </symbol>  
</svg>

Does anyone have an idea how to fix this?

Regards

Upvotes: 2

Views: 462

Answers (3)

Shaun Pearce
Shaun Pearce

Reputation: 96

I had the exact same problem and finally after searching for a while, the following made Chrome render my SVGs correctly:

-webkit-backface-visibility: hidden;

In your code above if you add the following, it works: 

.block header {
     font-weight: bold;
     padding: 0.5em 0;
     border-bottom: 1px solid grey;
     -webkit-backface-visibility: hidden;
  }

Upvotes: 3

enxaneta
enxaneta

Reputation: 33054

There is an error in your markup where you are closing the section before closing the last block. Still this is not fixing the problem. This probably is a bug. In order to make it work I've removed the transformation and recalculated the d attribute.

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;
}
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="svg-capacity" viewBox="0 0 17.293 20">
    <path d="M13.73,4a2.012,2.012,0,1,0,-1.437,-0.575a2,2,0,0,0,1.437,0.575zm1.52,1h-3.053a2.012,2.012,0,0,0,-2.027,2v5.494h1.52v7.506h4.067v-7.507h1.533v-5.493a2.022,2.022,0,0,0,-2.039,-2zm-11.693,-1a2,2,0,1,0,-2.027,-2a2.023,2.023,0,0,0,2.027,2zm1.52,1h-3.04a2.015,2.015,0,0,0,-2.04,2v5.493h1.533v7.507h4.067v-7.507h1.52v-5.493a2.015,2.015,0,0,0,-2.04,-2z" ></path>
  </symbol>  
</svg>


<section>
  <h1>Same code with columns</h1>
<div class='container withcolumns'>
  <div class='block'>
    <header>
      <svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>   
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  </div>
</section>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 273561

It's for sure a bug but here is a different code using the SVG as background to achieve the same without the bug:

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 18px;
  border-bottom: 1px solid grey;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.293 20" width="15"> <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)"></path></svg>') left top 0.5em/15px 15px no-repeat;
  
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  margin: 0.25em 0;
}
<section>
<h1>First block without columns</h1>
<div class='container'>
  <div class='block'>
    <header>
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>  
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      
    </ul>
  </div>
  <div class='block'>
    <header>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
</div>
</section>
<section>
  <h1>Same code with columns</h1>
<div class='container withcolumns'>
  <div class='block'>
    <header>
      
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>   
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
  <div class='block'>
    <header>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  </section>
</div>

Upvotes: 2

Related Questions