[Jquery] IE, Edge에서 width 값 인식 이슈.

 

2020.07.03

 

타이틀 태그 옆에 선이 예쁘게 그어지는 작업을 했다.

 

구현 작업 : 유동적인 타이틀 텍스트에 맞게 우측에 그어지는 선이 유동적으로 움직인다.

 

예제 : 타이틀_______________  / 타이틀틀_______________ / 타이틀틀틀_______________

 

문제점: 타이틀 길이에 맞게 우측의 선이 유동적으로 움직여야 하는데,

          IE, Edge 브라우저에서 width값 인식이 제대로 되지 않는다.

 

 

구현 소스 : 

HTML

JQuery

 

실제 타이틀 텍스트를 감싼 .txt-wrap 태그는 display:inline-block;으로 설정되어있는 상태이며

padding, margin, border등 어떤 css속성도 적용되지 않은 상태이다.

 

그런데 IE/Edge에선 페이지 리프레시 후, 화면이 로드되면 항상 90~100px에 가까운 값이

더해져 width값이 찍히는 일이 발생했다..

 

그래서 호출을 파일 상단에서도 해보고, 하단에서도 해보고 아무효과도 주지 않았지만,

css로 여러 여백도 0값으로 맞춰보고 제이쿼리 선택자도 바꿔보고, JS로도 짜보았지만...

여전히 해결되지 않아서 답답한 상황이었다.

 

IE에서는 간혹 잘못된 width값이 리턴되기도 하는지 stackoverflow엔 유사한 질문은 많았지만

같은 케이스는 없어서 난감했다..

 

개발자 도구로 찍어보면 실제로 계산된 태그의 너비값은 정확하고, 콘솔창에서 함수를 재호출 해보면

제대로된 값이 찍힌다. 

 

고민하고 있던 상황에 개발자 분에게 넌지시 여쭈어 보니, 콘솔창은 최종값만 찍혀서 나오기 때문에, 

호출되면서 잘못되는것 같다는 말을 해주셨다.

 

그래서 고민을 하다가, 일단 타이틀의 너비값은 잘찍히니까, DOM이 다 그려지고, 그 후에 좀 늦게

호출을 하면 되지 않을까? 싶어서 setTimeOut 함수를 사용하였더니!!!!!

 

해결이됐다. (>_<)//// 해결하고 보니 생각이 나는게.. 예전에 FLEX Layout을 사용할때 IE는 min-width값을

제대로 인식하지 못했던게 생각이 났다. 그 외에도 정확한 고정값을 넣어주지 않으면

자동으로 너비든 높이든 인식하지 못하는 점도 있었다. 이 못난... IE...

 

크롬에서는 정상적으로 출력되었지만, 어떻게든 다른 브라우저에서도 동일하게 구현하고 싶었다.

좋은 조언을 해주신 개발자님께 감사하는 마음을 가지며...

 

다행히 이번 미션도 클리어! :)