[iOS, css] ios 16.4 transform 문제 (하이브리드앱)

광야클럽 앱을 보면 저렇게 카드 뒤집는 애니메이션이 있다
내가 개발하는 하이브리드앱에서도 저거랑 비슷하게 동작하는 부분이 있다.
 

 
 
그러던 어느 날...
누군가 ios 16.4로 업데이트를 했고
카드가 돌아는 가지만
화면을 절반으로 나눴을 때 오른쪽은 터치가 먹히고
왼쪽은 터치가 안 먹히는 이상한 현상이 일어난 것임
 

.card {
  perspective: 1000px;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.frontCard {
  backface-visibility: hidden;
  transform: rotateY(0deg);
}

.backCard {
  backface-visibility: hidden;
  transform: rotateY(180deg)
}

뒤집는 기능에 먹인 css들이 대충 저랬는데
transform 되면서 영역이 오른쪽으로 잘못 간줄 알았음
 

이렇게 뭔가 화면이 잘못 잡히는 건 줄 알았다
원래 화면이 초록색이라면 뭔가 하늘색 영역처럼 잡혀서 왼쪽 터치가 안 먹히는 건줄 알았는데
막상 디버깅해서 확인하면 밀리는 거 하나 없이 완벽하게 잘 화면 꽉차게 잡히는 것임
 
 
아무리 봐도 문제는 transform 이다.
앞면은 다 잘 눌리는데 뒷면으로 돌리면 문제니까.!!!!

Using CSS transforms - CSS: Cascading Style Sheets | MDN

해결은 이 글보고 했다
 
 

.card {
  perspective: 1000px;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.frontCard {
  backface-visibility: hidden;
  transform: rotateY(0deg);
}

.backCard {
  backface-visibility: hidden;
  transform: rotateY(180deg) translateZ(1px);
}

뭐가 달라졌게요
translateZ(1px) 추가함
 
translateZ가 뭔데.....
아래 글들을 보고 터치 안 먹힌 원인도 알아냈다

transform: translateZ (Devlog 19일차)

모바일 웹킷(webkit) 브라우저에서 z-index 문제 해결 방법

z-index는 2d이고 translateZ는 3d 랜다
translateZ(50px) 하면 3차원에서 z축으로 50px 앞으로 오는 것이다
 
반은 눌리고 반은 안눌리던게
z축의 반은 뒤에 있고 반은 앞에 있던게 아닐까? 하는 추측
아님 3차원이니까 비스듬하게 되있던가
암튼 터치가 안 된 정확한 이유는 모르지만 z축을 앞으로 땡기니 된다

translateZ(1px)을 하면 카드 찹찹 뒤집는 느낌이 들고
숫자를 키울 수록 상자를 옆면으로 돌리는 듯한 느낌의 모션이된다

16.3까지는 저거 없이도 잘 됐는데..
16.4부터 애플에서 더 속성을 빡세게 잡기로 했는지 뭔지
하 업뎃때마다 힘드러요ㅜ
 
아무튼 해결해서 다행이다
이럴 때마다..
ios가 사라졌으면 ..