모바일에서 height 0이 되버리는 문제, 클래스명 canvas

최근 로테이션되는... 즉 자동으로 바뀌는 갤러리를 만들어 정상 작동되는 것을 확인했습니다. 모든 브라우저에서 이상없이 구현되었는데 (반응형 페이지 역시 이상없음...) 에뮬레이터가 아닌 실제 모바일에서 확인하니 갤러리가 정상적으로 보이지 않고 아무것도 표시되지 않더군요... 그래서 Xcode의 inspector를 사용해 뭐가 문제인지 알아봤습니다...

클래스명이 canvas인 div 태그의 height가 0으로 자동 변경됨"

원인은 자동으로 height값이 0으로 inline 값으로 설정되는 것이었습니다... 그래서 그 이유를 알기위해 몇가지 debugging해보니 div 태그의 설정된 클래스명이 canvas이기 때문이었습니다. 그 이유는 사실 잘 모르겠으나 canvas 태그와 같은 이름으로 클래스에서 사용하였기 때문이라고 추측... 모든 class 명들을 css와 html에서 수정하였습니다. 그 결과 모두 정상 출력되었습니다.

테스트 디바이스가 iPhone이라 Android에서는 정상 출력될지도 모르겠습니다. 하지만 canvas명을 클래스이름으로 사용해서는 안된다는 것을 알게되었습니다. 구글링 해봤지만 비슷한 증상이나 관련 글은 찾기 어렵더군요...