CSS only tactile push effect.

Comments

Fresh Top
  1. Is ontouchstart="" for parent hack (https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari#8877902) still needed to trigger :active on iOS or there is some newer/better technique?

    1
  2. @arzatskis Looks like it doesn't work on iOS, but maybe user-select:none makes a difference, haven't tested.

  3. Forked your pin before asking, tried adding meta tag for viewport (the same that removes tap delay) with no luck. Tried "touch-action", "user select" properties too with no luck. Thought maybe you'll know other techniques.. (user-select: none helps a bit - there's no prompt to copy/select button label)

    (it's also shame, that only after playing with your pen I found that there's problems with :active on iOS devices. Never stumbled on this before - with all flat / phone UIs :hover / :active are more like afterthought. Will be good reminder for the future..)

    1
  4. Have very little experience with CSS to give feedback. But as a layman, it looks and feels very nice to use. Well done.

    1
  5. @arzatskis I've added a tiny iOS only script that fixes the issue by adding the touchstart event listener to each button. Not the best, but it works.

Sign Up or Log In to leave a comment.