[이슈노트] iOS 이슈 모음 #6 (letter-spacing, position: sticky, label 텍스트 줄바꿈)

 

IE가 떠났더니 아이폰 5S 가 기다리고 있는 현실

 

 

 

 

1. letter-spacing 이슈

 

텍스트 자간을 letter-spacing으로 조절했는데 아이폰 5S 에서만 안먹는 이슈 발생

 

text-rendering:optimizeSpeed

 

> 해결

 

 

MDN에서는 해당 css를 이렇게 설명한다.

optimizeSpeed
브라우저는 텍스트를 그릴 때 가독성과 기하학적 정밀도보다 렌더링 속도를 강조합니다.
 커닝과 합자를 비활성화합니다.

 

왜 letter-spacing 이 안먹었는지 알 수 없으나.. text-rendering:optimizeSpeed 를 넣어주면서 렌더링에 무슨 영향을 끼쳐서...  letter-spacing이 먹게 된걸까..? 알 수 없다.. 

 

 

 

 

---

 

 

 

 

2. position: sticky 이슈

 

아이폰5S에서만 안먹는 이슈 발생

 

position:-webkit-sticky

 

> 해결

 

벤더프리픽스를 추가 후 해결

 

 

---

참고

 

https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

text-rendering - CSS: Cascading Style Sheets | MDN

 

 

 

---

 

 

 

 

3. label 텍스트 줄바꿈 이슈

 

아이폰8(14.8), 아이폰5(12) 에서 label안의 텍스트가 강제 줄바꿈이 된다.

 

white-space:nowrap

 

> 해결