Simple HTML/CSS tabs navigation does not work in Safari 9. Why?

Question

I don't get it. The two-tabs-navigation here works with Safari 7, with Firefox 41, with Chrome 46. But not with Safari 9 (Mac). No error message, no clue what it is. It seems the second tab is being selected; but the DIV is not being displayed. (Worse, the same code seems to work here .)

CSS is this: tab { padding-left: 2em; }

        /* navigation bar for maps/definition */
        .cctabs {
            width: 100%;
            margin: 100px auto;
            font-family: Arial, sans-serif;
        }
        .cctabs input[type="radio"] {
            opacity: 0;
        }
        .cctabs label {
            color: #000;
            cursor: pointer;
            float: left;
            margin-right: 2px;
            padding: 0 7%;
            font-size:13px;
            font-weight:bold;
            border: 1px solid #fff;
            height: 15px;
            background-color: #eee;
        }
        .cctabs label:hover {
            background: -webkit-linear-gradient(#8a6a6a 0%, rgba(102,102,102,0.17) 100%);
        }
        .cctabs input:checked + label {
            background: #fff;
            color: #ebb704;
            border-top:solid 2px #ebb704;
            background-color: rgba(245, 245, 245, 0.7);
        }
        .cctabs input:nth-of-type(1):checked ~ .panels .panel:first-child, .cctabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2), .cctabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3), .cctabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
            opacity: 1;
            -webkit-transition: .3s;
            /*position:relative;*/
            z-index:999;
        }
        .cctabs .panels {
            float: left;
            clear: both;
            position: relative;
            width: 100%;
            background: #fff;
        }
        .cctabs .panel {
            width: 100%;
            opacity: 0;
            position: absolute;
            background: #fff;
            padding: 4%;
            box-sizing: border-box;
        }               
    </style>        

HTML this:

    <div class="cctabs" style="height: 780px; width: 1135px;">
        <input checked id="one" name="tabs" type="radio">
        <label for="one" style="margin-left: 300px"><i class="fa fa-pencil-square-o"></i> Annual Display</label>
        <input id="two" name="tabs" type="radio" value="Two">
        <label for="two"><i class="fa fa-magic"></i> Long-Term Display</label>
        <div class="panels" style="padding-top: 10px;">
            <div class="panel" style="height: 730px; padding: 0; margin: 0;">
                <div style="width: 100%; height: 725px;">
                    <div id="div_graph" style="width: 1115px; height: 650px;"></div>
                    <button id="updateLegend" style="margin-left: 1000px;">Show Legend</button>
                    <br clear="all" />
                    <button id="showAll" style="margin-left: 1000px">Show All</button>
                    <button id="hideAll" >Hide All</button>
                </div>
            </div>
            <div class="panel" style="height: 725px; padding: 0; margin: 0;">
                <div style="width: 100%; height: 725px;">
                    <div id="div_graph2" style="width: 1115px; height: 650px;"></div>
                    <button id="updateLegend2" style="margin-left: 1000px">Show Legend</button>
                    <br clear="all" />
                    <button id="showAll2" style="margin-left: 1000px">Show All</button>
                    <button id="hideAll2" >Hide All</button>
                </div>
            </div>
        </div>


        <script>

            $(function () {

                <?php include("graph_sea_level_1.js"); ?>

                <?php include("graph_sea_level_2.js"); ?>
            });

        </script>

    </div>

Thanks for any hints.

Answer 1

Seems like the css-selector used for changing the tabs aren't supported in Safari 9. Please note that even the demo from codeconvey isn't working.

There are some more or less common and well established tab-libraries which you could use. I personally prefer Twitter Bootstrap which has a lot more functions including tabs. There are nice samples and everything is well documented: Bootstrap 3 Tabs