CODEWITHSUNDEEP
ioscssmacossafarisass
Elad Shechter
Elad Shechter

Reputation: 4045

Child element doesn't take the focus of the parent in safari browsers

I have a container that when I click it gets focus and show the hidden content inside of him.

Now, in the hidden container there is a button when you click on it gets the focus and closes the parent.

It works in all browser except safari on ios and macos.

I'm looking for a clean CSS Solution.

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

Upvotes: 3

Views: 2531

Answers (2)

lesyk
lesyk

Reputation: 4119

Solution for iOS will be holding Option Key + Tab key. Then button will be tabbed on.

Upvotes: -2

Talya S
Talya S

Reputation: 754

Change the button tag into a different element (e.g. DIV) with a tabindex attribute and then it works in Safari as well.

Safari, and apparently some other browsers on iOS have strange focus behaviour for buttons. It seems they never get focus, even with tabindex.

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

Example

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

DEMO

Upvotes: 6

Related Questions