안녕하세요. 오랜만입니다.
최근 들어간 프로젝트는 반응형 외부 사이트 멤버십 사이트였습니다.
프로젝트 중반에 해당 기업 사이트가 개편이 됨에 따라 멤버십 사이트 디자인도 전부 변경이 되었어요.
그래서 코로나가 기승을 부리는 때에도 굉장히 바쁘게 보냈던 것 같아요. 감사한일입니다.
css 팁 메뉴로 들어가는 내용도 실은 작업하면서 부딪혔던 일들이어서
작업일지로 들어가는게 맞으나, 그때 그때 기록을 남기지 못해서 그런지 그 때 상황이 전부 기억나지 않아요.
이 메뉴에 들어오는 아이들은 작업 당시의 기억이 나는 것 위주로 올리려고 합니다.
자 이제 각설하고, 본론으로 들어갈게요.
모바일 디바이스 크로스 브라우징을 하며 발견한 이슈입니다.
아이폰 input/textarea에 텍스트 입력이 안되는 현상이었어요.
제가 해당 화면을 작업하고 기기 테스트를 할 때는 멀쩡했기 때문에 정말 깜짝 놀랐습니다.
단계별 확인을 거쳤습니다.
1단계 - 정말 아이폰에서만 안되는 현상인가? : YES, 안드로이드에선 문제가 없었습니다.
2단계 - Form 요소가 들어간 다른 페이지에서도 동일하게 발생하는가? :
YES, text field에 해당하는 요소들이 전부 같은 현상이었습니다.
3단계 - 해당 현상에 대한 구글링 : 같은 케이스에 대한 글을 찾음.
4단계 - 솔루션 적용.
5단계 - 기기 테스트 : 아이폰, 안드로이드 폰 둘 다 확인. -> 정상 작동.
문제는 "아이폰 크롬 브라우저"에서 "user-select:none;"적용 시 발생하는 문제였습니다.
왜 이런 문제가 발생하였는가?
퍼블리싱 작업 후, 개발 팀장님께서 해당 화면 작업 중 "텍스트 복사 금지"에 대한
css 처리가 필요하다라는 요청을 하셨습니다.
그래서
body * {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
이렇게 적용하였고, 저 속성에 대해 제대로 파악하지 못해서 생긴 일이었습니다.
내부 사이트를 주로 작업 해오다 보니, 외부 사이트 진행 시 필요한 속성들에 대한 공부가 부족했던 것 같습니다.
이번 프로젝트를 진행하며 소소한 배움이 많았어요.
위 문제는
아래와 같이 해결이 되었습니다.
body * 에 적용한 위 속성을 body로 옮겨 적용한 후,
input, textarea {
-moz-user-select: auto;
-webkit-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
input과 textarea에 user-select를 auto로 적용해주었습니다.
아이폰/안드로이드 크롬 브라우저에서 정상 작동하는 것까지 확인 마쳤습니다.
'DEV > WEB' 카테고리의 다른 글
[Gulp] 걸프를 활용하여 프론트엔드 개발 환경 조성하기 #1 (0) | 2021.03.30 |
---|---|
[Fullcalendar]풀캘린더 플러그인에서 툴팁 사용하기.(버전 4, 5 두 가지) (5) | 2021.02.13 |
[Highcharts] 하이차트 그래프 기본 옵션으로디자인 예쁘게 변경하기 - (6~7 종류 차트 + 자주사용하는 옵션) (2) | 2021.01.17 |
[Semantic UI] 모바일 디바이스에서 modal 팝업 스크롤링 안되는 현상. (0) | 2020.12.15 |
[Jquery] IE, Edge에서 width 값 인식 이슈. (0) | 2020.07.03 |