Safari Click Event And Active State Cannot Coexist

I'm try to create a 3-state button: Off (default) On (hover/rollover) Down (active/click) In both Safari desktop and Safari mobile, when the down state is added (via :active pseu

Solution 1:

I think the issue is that the states themselves are catching the click event. Then when the state is hidden, the click doesn't bubble up.

Adding this line of CSS makes it work:

button.has-down.state { pointer-events:none; }

Here's the fiddle: https://jsfiddle.net/m7hev81t/2/

And full example, where the second button now triggers the event.

$('button').on('click',function(e){
	$('#log').html('clicked ' + newDate().getTime());
});

button {
  position:relative;
  background:transparent;
  border:none;
  height:50px;
  width:200px;
  cursor:pointer;
}

button.state { 
  position:absolute;
  width:100%;
  height:100%;
  display:none;
  top:0; left:0;
}

.state.off { background:green; display:block; }
.state.on { background:orange;}
.state.down { background:red; }

button:hover.state.off, button:hover.state.down {display:none;}
button:hover.state.on {display:block;}

button.has-down.state { pointer-events:none; }
button.has-down:active.state.on, button.has-down:active.state.off {display:none;}
button.has-down:active.state.down {display:block;}

#log {
  width:100%;
  border:1px solid grey;
  min-height:2em;
  margin-top:2em;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><p>
No down/click state.
</p><button><divclass="state off">
off
</div><divclass="state on">
on
</div><divclass="state down">
down
</div></button><p>
Down/click state.
</p><buttonclass="has-down"><divclass="state off">
off
</div><divclass="state on">
on
</div><divclass="state down">
down
</div></button><divid="log"/>

Solution 2:

MDN

On systems with multi-button mice, CSS3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.

so I guess not everything "click" the element will fire :active,

on safari, finger or mouse pointed on element does not count, unless:

By default, Safari on iOS does not use the :active state unless there is a touchstart event handler on the relevant element or on the element.