0

Using the top CSS property on a relatively positioned element fails on iOS. I use this property to simulate the pressing of a button. Why does it fail, and how to achieve the same effect on iOS?

Codepen

<button>
  button
</button>

...

button {
  position: relative;
  padding: 30px 80px;
}

button:active {
  top: 6px;
}
drake035
  • 3,869
  • 33
  • 97
  • 193
  • It’s not the top that is failing. If you try :hover instead of :active and touch the button it will go down 6px. It’s the lack of active pseudo element on IOS. See [link]https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari for a discussion of this and some possibly dubious ways round it, and some that look practical. – A Haworth Apr 24 '21 at 21:07
  • Thanks a lot :) – drake035 Apr 24 '21 at 21:40

0 Answers0