CODEWITHSUNDEEP
htmlcsssafari
James John McGuire 'Jahmic'
James John McGuire 'Jahmic'

Reputation: 12624

Radio tabs not working in Safari

The below sample works in FireFox, Chrome and even my iPhone, but not on Safari for Windows 5.1.6. It may work on Safari for Mac, but without a Mac, it's difficult to confirm. While having it work on Safari for Mac would suffice, I would rather find a solution that will have this render correctly on Safari for Windows.

The sample:

#locations {
  width: 500px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.tab-label {
  z-index: 1;
  width: 45%;
  width: calc(50% - 20px);
  color: gray;
  background: black;
  display: block;
}

.tab-label:first-of-type {
  margin-left: 0;
}

.tab-content {
  width: 100%;
  -webkit-order: 1;
  order: 1;
}

input[type=radio],
.tab-content {
  display: none;
}

input[type=radio]:checked+.tab-label {
  color: white;
  background: blue;
}

input[type=radio]:checked+.tab-label+.tab-content {
  display: block;
}
<div id="locations">
  <input type="radio" id="tab-tab1" name="group" checked="checked" />
  <label for="tab-tab1" class="tab-label">TAB1</label>
  <div class="tab-content">
    TAB1 Content
  </div>
  <!--TAB1-->
  <input type="radio" id="tab-tab2" name="group" />
  <label for="tab-tab2" class="tab-label">TAB2</label>
  <div class="tab-content">
    TAB2 Content
  </div>
  <!--TAB2-->
</div>
<!--locations-->

This was somewhat based off of the following codepen sample, which also seems to have 'issues' on safari.

A somewhat related question was posted here.

Any help?

Upvotes: 0

Views: 285

Answers (1)

user4447799
user4447799

Reputation:

As per wikipedia, the last supported version of safari for windows was v5.1.7 and was discontinued on May 9, 2012. So definitely, it is a dead browser on the windows platform and developing for it with new systems in mind is a pointless endeavour. Unless your target audience requires you to support this browser, you're better off developing without keeping that in mind.

Upvotes: 3

Related Questions