На iOS / iPad кнопка относительного положения исчезает при нажатии

Question

У меня есть кнопка, которая отлично работает на Chrome (рабочий стол), Safari (рабочий стол). Но исчезает при нажатии на iOS / iPad Safari (13.1). Я отладил его, переключив свойства 1 на 1, и пришел к выводу, что position:relative является частью причины. С отключением это решает проблему. Однако мне нужно, чтобы моя кнопка была относительной, поэтому хотелось бы немного лучше разобраться в проблеме.

Answer 1

Как обычно, я снова был озадачен ошибкой z-index на iPad (они всегда меня получают). Оказывается, проблема была связана с контекстом стекирования:

Элемент <button>, который исчезал при щелчке, каким-то образом отправлялся за своим контейнером, <div> с background-color: white. Было два способа исправить это; установите родительский контейнер (контекст) на z-index: 0. Это сработало.

Или просто удалите background-color: white, поэтому установите его на transparent. Таким образом, кнопка не будет спрятана позади.

Однако я до сих пор не знаю, почему это происходит только на iPad. Я знаю, что iPad часто обрабатывает z-индексирование не так, как браузеры настольных компьютеров (включая настольный Safari), что затрудняет прогнозирование.

Если кто-то сможет объяснить это достаточно хорошо, я сделаю это приемлемым ответом.