Sistema de abas não está funcionando no mobile

[rikaschmitt 54]

Bom dia galera.

 

Estou criando um site mobile e em uma determinada parte existe um sistema de abas. O sistema é puro css que encontrei pela internet... O problema é que quando o site é visualizado pelo celular, as abas não funcionam direito.

 

No iOS por exemplo, nem chega a funcionar.. já em alguns Androids, funciona e em outros não.

 

 

HTML:

<div class="tabs" id="tabs-1">
  <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
  <input id="tab-1-2" name="tabs-group-1" type="radio" />
  <input id="tab-1-3" name="tabs-group-1" type="radio" />

  <label for="tab-1-1">ABA 1</label>
  <label for="tab-1-2">ABA 2</label>
  <label for="tab-1-3">ABA 3</label>

 <!-- Aba 1 -->
 <div class="tab-content">
  CONTEUDO ABA 1
 </div>

 <!-- Aba 2 -->
 <div class="tab-content">
  CONTEUDO ABA 2
 </div>

 <!-- Aba 3 -->
 <div class="tab-content">
  CONTEUDO ABA 3
 </div>
</div>

CSS:

.tabs input[type='radio'] { display:none }
.tabs label {
width:100px; text-align:center; padding:20px 0;
color:#666666; font-size:2.1em; font-family:'DIN-Light'; background-color:#EEEEEE;
display:inline-block;
cursor:pointer;
}
.tab-content { display:none; background-color:#F3F3F3; border-top:6px #FE7B43 solid; width:300px; text-align:center; padding:50px 0; position:relative; }
#tabs-1 :checked + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + .tab-content { display: block }

Exemplo online.

 

E ai.. alguém sabe? Valeu.

[rikaschmitt 54]

Acredito que pode ser alguma incompatibilidade com o mobile mesmo.

 

O que fiz foi trocar e utilizar um script jquery básico e funcionou.

:)