Kind Element nicht den Fokus des Elternteils in Safari-Browsern

Question

Ich habe einen Container, der, wenn ich klicke es bekommt Fokus und zeigen den versteckten Inhalt in ihm.

Nun, im versteckten Container gibt es eine Schaltfläche, wenn Sie darauf klicken, wird der Fokus und schließt die Eltern.

Es funktioniert in allen Browsern außer Safari auf iOS und MacOS.

Ich bin auf der Suche nach einer sauberen CSS-Lösung.

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

Ändern Sie den Button-Tag in ein anderes Element (z DIV) mit einem tabindex-Attribut und dann funktioniert es auch in Safari.

Safari und anscheinend einige andere Browser auf iOS haben seltsames Fokusverhalten für Tasten. Es scheint, dass sie niemals den Fokus bekommen, auch nicht mit Tabindex.

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

Beispiel

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

DEMO