L'élément enfant ne prend pas le focus du parent dans les navigateurs de safari

Question

J'ai un conteneur qui quand je clique dessus obtient le focus et montre le contenu caché à l'intérieur de lui.

Maintenant, dans le conteneur caché il y a un bouton lorsque vous cliquez dessus il obtient le focus et ferme le parent.

Fonctionne dans tous les navigateurs sauf safari sur ios et macos.

Je suis à la recherche d'une solution CSS propre.

HTML

<div class="box" tabindex="0"> 
    <div class="front">CLICK ME</div> 
    <div class="hidden"> 
    <button class="close">close button</button> 
    </div> 
</div> 

SASS

.box{ 
    position:relative; 
    height:200px; width:200px; 
} 

.front, 
.hidden{height:100%; width:100%; position:absolute; } 

.close{height:100px; width:100px;} 

.box:focus{ 
    .front{display:none;} 
    .hidden{display:block;} 
} 

.front{background:blue; color:white;} 
.hidden{background:red; display:none;} 

DEMO

Answer 1

Modifier la balise de bouton dans un élément différent (par exemple DIV) avec un attribut tabindex et cela fonctionne dans Safari ainsi.

Safari, et apparemment certains autres navigateurs sur iOS ont un comportement de mise au point étrange pour les boutons. Il semble qu'ils ne se concentrent jamais, même avec tabindex.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus

Exemple

<button class="close">close button</button><!-- not working --> 
<!-- Use instead --> 
<div class="close" tabindex="0" role="button"></div><!-- working --> 

DEMO