카
카카오엔터테인먼트FE
July 20, 20231회
사파리, 모바일 환경에서의 트러블슈팅
간단 소개
사파리 및 모바일 환경에서 발생하는 웹 개발 트러블슈팅과 해결 방안을 제시하고, 브라우저 엔진 차이와 모바일 환경의 특성을 고려한 접근법을 설명한다.
AI Summary
- 사파리 브라우저 이슈
- 스크롤 내부 요소 삭제 시 scrollTop 위치가 크롬과 다르게 동작하며, 사파리는 scrollTop을 유지한다. 해결책으로, scrollTop 업데이트가 없는 경우 크롬의 방식을 강제 적용한다.
- rotation과 DOM 배치 시, 스크롤이 있는 영역은 rotation transform에 포함되지 않아 요소가 가려지는 문제가 발생한다. 해결책으로, 가려지는 요소에
transform: translate3d(0,0,0)또는will-change: transform을 추가하여 독립적인 요소로 만든다.
- 모바일 환경 이슈
- 스크롤 관성 도중 scrollTop 변경이 반영되지 않는 문제가 발생한다. 해결책으로, scrollTop 값을 변경하기 전후에
overflow: scroll속성을 잠시 해제했다가 복원하여 스크롤 관성을 제거한다. - touchend 이벤트 발생 시 터치된 요소를 숨기면 그 뒤의 요소가 클릭되는 문제가 발생한다. 해결책으로, touchend 대신 click 이벤트를 사용한다.
- 스크롤 관성 도중 scrollTop 변경이 반영되지 않는 문제가 발생한다. 해결책으로, scrollTop 값을 변경하기 전후에
Next Feeds
올플래시 스토리지 선정 시 체크포인트
올플래시 스토리지 도입 시 성능, 비용, 워크로드, 네트워크 구성, 데이터 리덕션 등 다양한 요소를 고려해야 효율적인 시스템 구축이 가능하다.
올플래시 스토리지SSDNVMeIOPS데이터 리덕션
2023. 7. 19.
글루시스
사용법과 함께 작성해본 좌충우돌 AWS DMS 사용기 - feat. RDS 통합 이야기
뱅크샐러드의 AWS DMS를 활용한 RDS 통합 경험 공유 및 기본적인 DMS 사용법, 문제 해결 팁을 제공합니다.
AWS DMSRDSMSA비용 최적화데이터 마이그레이션
2023. 7. 19.
뱅크샐러드
11번가 인턴의 카탈로그 리뷰 API 개선기
11번가 인턴의 카탈로그 리뷰 API 개선 경험 공유: 글로벌 캐시 도입 및 자동 최신화를 통해 성능 향상 및 DB 부하 감소 효과를 거둠.
API 개선글로벌 캐시Redis성능 최적화비동기 처리
2023. 7. 18.
11번가
Gitops를 활용한 AWS EKS Blue-Green 업데이트 적용기
GitOps 기반 Blue-Green 배포 전략을 통해 EKS 업데이트를 안정적으로 수행하고, 배포 효율성을 개선한 경험을 공유합니다.
EKSGitOpsBlue-GreenArgoCDKubernetes
2023. 7. 16.
비브로스
Kode Runner 2022를 회고합니다.
카카오뱅크 사내 기술 컨퍼런스 Kode Runner 2022 회고: 개발자 성장과 기술 문화 조성, 다양한 이벤트와 소통의 장.
Kode Runner기술 컨퍼런스DevRel카카오뱅크기술 문화
2023. 7. 15.
카카오뱅크
VPN SoftEther 설치 및 세팅
SoftEther VPN 설치 및 설정 방법, 그리고 장단점에 대한 기술 블로그 글입니다.
VPNSoftEtherL2TP네트워크보안
2023. 7. 14.
테이블링