브라우저 호환에 문제가 생겼습니다.
[ 사건 발단 ]
window 환경 & chrome 브라우저, 특정 경우에서만 화면 떨림 현상이 발생했습니다.
[ 원인 ]
element-resize-event 모듈에서 무한 호출되어 계속 화면을 렌더링합니다.
[ 해결방안 ]
display - grid (css) 적용하여 해결한 것 같았지만 IE 브라우저에 지원되지 않다고 합니다.
브라우저 사용 점유율을 검색해보며 현실부정 해보았지만 다른 해결방안을 내놓았습니다. (서비스 사용 고객이 대부분 IE 11 이전 버전을 사용할 확률이 높았습니다. 자동 업데이트되지 않기 때문입니다.)
( IE 9.39 %에 대부분이 우리 고객일 거에요..😇 그래요.. 저도 개발자 아니면 쓰고 있을 수도 있다고 생각해요)
. . .
브라우저들아.. 우리 친해지자..! 😬(고객만세ㅎㅎ)
Cross-browser
W3C에서 채택된 웹 규격(Web Standard)에 맞는 코딩을 함으로써, 어느 브라우저에서나 기기에서 다른 기종의 OS나 사이트가 제대로 보여지고(HTML 렌더링 기술) 작동되도록 웹페이지를 제작하는 방법론
각 브라우저마다 렌더링 엔진이 다르기 때문에,
작동되지 않는 javascript, html5 코드가 존재하고, 해석하지 못하는 css 코드가 존재합니다.
렌더링 엔진
* 동일성이 아닌 동등성(등가성)을 의미
동등한 수준의 정보, 기능 접근
플랫폼에 따라 달리 구현되는 기술을 공통 요소로 사용하여 비슷하게 웹 페이지 제작합니다.
크로스브라우징
브라우저 호환 검사 사이트 👀 Can I USE
css 호환
-
-webkit /*goggle, safari*/ -ms /*IE*/ -moz /*firefox*/ -o /*opera*/ -
HACK(핵)
IE 버전마다, 브라우저마다 특성에 맞게 사용합니다. -
styled-components
Support IE9+, all evergreen browsers
javascript(ES6) 호환
- 참고
