CODEWITHSUNDEEP
cssfirefoxsvg
mikeNIN
mikeNIN

Reputation: 13

svg and inline-block display issue on Firefox

As suggested by @Robert Longson I'm rewriting original question. I have 3 inline svgs with bottom-padding hack in containers. I want this boxes to be inline, so in css I've added inline-block and I want have width not exceeding some value so on the same container I added max-width attribute.

All is fine except for Firefox, where the big box is not displayed and two small boxes are much smaller compared to Chrome. Now as @Rahul suggested I used width instead of max-width and it fixed the issue. Looks like bug in Firefox with svg.

Link to code: https://jsfiddle.net/mikeNIN/2yjob68o/ and code: HTML:

<div class='container_main' onclick=''>
  <div class='main' id='main-info'>
    <div id='weather-icon'>
      <div class="svg_container">
       <svg width="100%" style="padding-bottom: 64%; height: 1px; overflow: visible" viewBox="0 0 64 41" preserveAspectRatio="xMidYMin slice" version="1.1"><g transform="translate(0,-1011.3622)"><rect width="63.8" height="40.8" x="0.1" y="1011.5" style="fill:#a662bd;stroke-linecap:round;stroke-width:0.2;stroke:#000"/></g></svg>
      </div>
    </div>
  </div>
  <div class='enh' id='enhanced-info'>
    <div class='svg_container_small'>
      <svg width="100%" style="padding-bottom: 100%; height: 1px; overflow: visible" viewBox="0 0 16 16" preserveAspectRatio="xMidYMin slice" version="1.1"><g transform="translate(0,-1036.741)"><rect width="15.9" height="15.9" x="0" y="1036.8" style="fill:#35c062;stroke-linecap:round;stroke-width:0.1;stroke:#000"/></g></svg>
      <span>small1</span>
    </div>
    <div class='svg_container_small'>
      <svg width="100%" style="padding-bottom: 69%; height: 1px; overflow: visible" viewBox="0 0 16 11" preserveAspectRatio="xMidYMin slice" version="1.1"><g transform="translate(0,-1041.3622)"><rect width="15.9" height="10.9" x="0" y="1041.4" style="fill:#4114bd;stroke-linecap:round;stroke-width:0.1;stroke:#000"/></g></svg>
      <span>small2</span>
    </div>
  </div>
</div>

CSS:

html { 
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
.main {
 text-align: center;
}
.container_main {
 min-height: 100vh;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-direction: column;
}
.svg_container {
 max-width: 12em;
 display: inline-block;
 vertical-align: top;
 margin-top: 10px;
 margin-bottom: 10px;
 }
 .enh {
 text-align:center;
}
 .svg_container_small {
 max-width: 6em;
 display: inline-block;
 vertical-align: top;
 margin: 10px;
 }

Upvotes: 1

Views: 2844

Answers (1)

Rahul
Rahul

Reputation: 2071

Do this in your CSS.

.svg_container{
    display: block; /* No inline-block */
    margin-left: auto;
    margin-right: auto;
}

enter image description here

I found your issue. just follow this code.

.svg_container{
    display: inline-block;
    width: 9em; /* Use width instead of max-width */
}

Note:

  1. display: -moz-inline-stack; This is the invalid property.

  2. max-width: 3em; max-width: 6em; max-width: 9em; Firefox will not render max-width and inline-block in same element.

Upvotes: 1

Related Questions