Pure HTML and CSS tabs displaying incorrectly in firefox

Question

I've created a simple tab interface using only CSS and firefox. It works well so far, particularly in Chrome, however, it is not displaying correctly in Firefox.

Here is the JS fiddle: https://jsfiddle.net/5p5dnv43/

And the code:

#tabscontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-top: 0.35em;
  margin-right: none;
  padding: 0;
  height: calc(100% - 0.35em);
  width: 100%;
}

/* Style the radio group that corresponds to the tabs */   
#tabscontainer > [name="radiogroupfortabs"] {
  position: absolute; 
  visibility: hidden; 
}

/* Set Flexbox ordering of radio items within the #tabscontainer.  A unique rule has to be created for each tab. */
#tabscontainer > #radiofortab1{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;}
#tabscontainer > #radiofortab2{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;}
#tabscontainer > #radiofortab3{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3;}
#tabscontainer > #radiofortab4{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4;}

/* Style all radio group LABELS (by class) to look like tabs. */
#tabscontainer > [id^="tab-label"] {
  max-height: 18px;  
  margin: 4px 2px 0 0;
  display: inline-block;  
  padding: 5px 11px;
  border-width: 0.5px 0.5px 0.5px 0.5px;
  border-style: solid;
  border-color: dimgrey;
  background-color: lightgrey;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/* Style unselected tabs (INPUT element's label) when the pointer hovers over them.  Could use the background-image attribute here instead of colors in order to give the tab any appearance. */
#tabscontainer > [id^="tab-label"]:hover {
  background: #99ccff;
}

/* Style all of the content DIVs including setting DISPLAY to None to start with.*/
#tabscontainer > [id^="tab-content"] {
    -webkit-box-ordinal-group: 999;
    -webkit-order: 999;
    -ms-flex-order: 999;
    order: 999; /*Set to a high value*/
    display: none;    
    z-index: 2;
    width: 100%;
    height: calc(100% - 2.3em);
    overflow: hidden;    
    border: 0.5px solid dimgrey;
    background: white;
    margin-top: -3px;
}

/* Style the currently selected tab (checked INPUT element's label)*/
#tabscontainer > [name="radiogroupfortabs"]:checked + [id^="tab-label"] {
  z-index: 4; /*brings to front*/
  margin-top: 0px;
  padding-top: 9px;
  background-color: white;
  border-color: dimgrey dimgrey white dimgrey;
  line-height:1em;
  font-weight: bold;
}

/* Display the content DIV that corresponds to the selected tab (because of the limitations of CSS selectors, this could not be done with a single rule.  A unique rule has to be created for each tab/tab content within the tab set.) */
#tabscontainer > #radiofortab1:checked ~ #tab-content1{display: block;}
#tabscontainer > #radiofortab2:checked ~ #tab-content2{display: block;}
#tabscontainer > #radiofortab3:checked ~ #tab-content3{display: block;}
#tabscontainer > #radiofortab4:checked ~ #tab-content4{display: block;}

<div id="lower-control-pane" class="row">
    <hr id="tabs-rule"/>
    <div id="tabscontainer">
    <!-- tab 1 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab1" checked/>
        <label id="tab-label1" for="radiofortab1">Status</label>
        <div id="tab-content1">
            <h2>Status</h2>
            <p>test context for first tab component</p>
        </div>  
    <!-- tab 2 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab2"/>
    <label id="tab-label2" for="radiofortab2">Notes</label>
    <div id="tab-content2">
        <h2>Notes</h2>
        <p>second tab test content</p>
    </div>  
    <!-- tab 3 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab3"/>
    <label id="tab-label3" for="radiofortab3">Names</label>
    <div id="tab-content3">
        <h2>Names</h2>
        <p>test context for third tab component</p>
    </div>  
    <!-- tab 4 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab4"/>
    <label id="tab-label4" for="radiofortab4">Log</label>
    <div id="tab-content4">
        <h2>Log</h2>
        <p>test context for fourth tab component</p>                 
    </div>   
</div>

All the tab titles should be displayed at the top of the interface. In Chrome, this works correctly. You can see that in Firefox, only the first tab title appears where it should. The other 3 tab titles appear below the interface.

I'm not sure what is causing this issue since it seems to work well anywhere other than Firefox.

Answer 1

If you hide the inputs, seems to behave the same in firefox and chrome. You don't need the inputs to be on the page, so you can hide them with display: none;

#tabscontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  margin-top: 0.35em;
  margin-right: none;
  padding: 0;
  height: calc(100% - 0.35em);
  width: 100%;
}


/* Style the radio group that corresponds to the tabs */

#tabscontainer > [name="radiogroupfortabs"] {
  display: none;
}


/* Set Flexbox ordering of radio items within the #tabscontainer.  A unique rule has to be created for each tab. */

#tabscontainer > #radiofortab1 {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

#tabscontainer > #radiofortab2 {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

#tabscontainer > #radiofortab3 {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

#tabscontainer > #radiofortab4 {
  -webkit-box-ordinal-group: 5;
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}


/* Style all radio group LABELS (by class) to look like tabs. */

#tabscontainer > [id^="tab-label"] {
  max-height: 18px;
  margin: 4px 2px 0 0;
  display: inline-block;
  padding: 5px 11px;
  border-width: 0.5px 0.5px 0.5px 0.5px;
  border-style: solid;
  border-color: dimgrey;
  background-color: lightgrey;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}


/* Style unselected tabs (INPUT element's label) when the pointer hovers over them.  Could use the background-image attribute here instead of colors in order to give the tab any appearance. */

#tabscontainer > [id^="tab-label"]:hover {
  background: #99ccff;
}


/* Style all of the content DIVs including setting DISPLAY to None to start with.*/

#tabscontainer > [id^="tab-content"] {
  -webkit-box-ordinal-group: 999;
  -webkit-order: 999;
  -ms-flex-order: 999;
  order: 999;
  /*Set to a high value*/
  display: none;
  z-index: 2;
  width: 100%;
  height: calc(100% - 2.3em);
  overflow: hidden;
  border: 0.5px solid dimgrey;
  background: white;
  margin-top: -3px;
}


/* Style the currently selected tab (checked INPUT element's label)*/

#tabscontainer > [name="radiogroupfortabs"]:checked + [id^="tab-label"] {
  z-index: 4;
  /*brings to front*/
  margin-top: 0px;
  padding-top: 9px;
  background-color: white;
  border-color: dimgrey dimgrey white dimgrey;
  line-height: 1em;
  font-weight: bold;
}


/* Display the content DIV that corresponds to the selected tab (because of the limitations of CSS selectors, this could not be done with a single rule.  A unique rule has to be created for each tab/tab content within the tab set.) */

#tabscontainer > #radiofortab1:checked ~ #tab-content1 {
  display: block;
}

#tabscontainer > #radiofortab2:checked ~ #tab-content2 {
  display: block;
}

#tabscontainer > #radiofortab3:checked ~ #tab-content3 {
  display: block;
}

#tabscontainer > #radiofortab4:checked ~ #tab-content4 {
  display: block;
}

<div id="lower-control-pane" class="row">
  <hr id="tabs-rule" />
  <div id="tabscontainer">
    <!-- tab 1 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab1" checked/>
    <label id="tab-label1" for="radiofortab1">Workspace Status</label>
    <div id="tab-content1">
      <h2>Workspace Status</h2>
      <p>test context for first tab component</p>
    </div>
    <!-- tab 2 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab2" />
    <label id="tab-label2" for="radiofortab2">Notes</label>
    <div id="tab-content2">
      <h2>Notes</h2>
      <p>second tab test content</p>
    </div>
    <!-- tab 3 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab3" />
    <label id="tab-label3" for="radiofortab3">Global Names</label>
    <div id="tab-content3">
      <global-names-component (internalEditRequest)=globalNameEditRequest($event)></global-names-component>
    </div>
    <!-- tab 4 -->
    <input type="radio" name="radiogroupfortabs" id="radiofortab4" />
    <label id="tab-label4" for="radiofortab4">Log</label>
    <div id="tab-content4">
      <log-component></log-component>
    </div>
  </div>
</div>