Флажок чистого CSS выглядит иначе на iOS

Я пытаюсь выполнить пресловутую задачу создания собственного флажка с помощью чистого CSS. На самом деле я не против использования Javascript / jQuery для получения того же эффекта, но пока я не нашел его полезным. В браузере все работает нормально, у меня есть треугольник (игра) для непроверенного значения и символ паузы для отмеченного. Однако на телефоне он выглядит совершенно иначе, и на него нельзя нажимать. Не совсем понимаю, почему все выглядит так кардинально иначе? Любые советы были бы действительно полезны.

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 12px;
  border-color: transparent transparent transparent #ffffff;
  outline: none;
  display: none;
  animation: pointer 0.4s infinite;
  cursor: none;
  transition: opacity 0.4s;
}

input[type=checkbox]:checked {
  width: 10px;
  height: 11px;
  border-left: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  border-top: none;
  border-bottom: none;
}