Tech/HTML52013. 7. 4. 01:26

 

요즈음 Windows 8.1과 Windows Server 2012 R2 출시로 많은 이야기들이 오고 가고 있는데, 그 중에서도 Internet Explorer 11에 대한 이야기도 많이 눈에 띕니다.

Internet Explorer 11에 등장하는 새로운 기능들도 많지만, 기존 버전과 확연히 달라지고 제거되는 기능들 중에 호환성에서 문제를 일으킬만한 요소들이 많이 눈에 띕니다. 이러한 부분들을 잘 정리한 아티클이 있어 소개합니다. (http://www.nczonline.net/blog/2013/07/02/internet-explorer-11-dont-call-me-ie/)

이 아티클에서 이야기하는 내용을 요약하면 다음과 같습니다.

  • 11부터 User Agent 문자열에서 MSIE 문자열이 사라집니다. Internet Explorer인지 확인하기 위하여 User Agent 문자열을 검사하는 시나리오에 의존하는 모든 종류의 프로그램 및 로직은 MSIE 문자열 대신 Trident 문자열을 검사하도록 패턴을 수정하는 것이 구 버전부터 11.0까지 모두 지원할 수 있는 정확한 방법일 것입니다.
  • navigator 객체의 appName 속성은 'Netscape', product 속성은 'Gecko' 문자열을 반환합니다. 이러한 속성에 의존하여 IE 인지 아닌지를 판단하는 코드에서는 이런 이유로 IE 11을 IE가 아닌 Gecko 렌더링 엔진을 사용하는 브라우저로 오판할 수 있습니다.
  • typeof document.all 식을 사용하여 결과값을 평가하면 'undefined'로 반환되지만, 실제 document.all 속성에 대한 호출은 정상적으로 작동합니다. 달리 말하면, Modernizer와 같은 Presence Test Framework에서는 document.all 속성을 IE11이 지원하지 않는 것으로 해석하지만, 호환성을 이유로 document.all을 평가 과정 없이 직접 호출하는 Legacy Web Page들은 문제없이 잘 실행됩니다. 그러나 Legacy Web Page이더라도 typeof document.all 과 같은 표현식의 값을 의존하는 경우 역시 호환성 문제가 발생할 수 있습니다.
  • 같은 이유로 element.attachEvent 메서드의 Presence를 확인하기 위해서 typeof 연산자를 사용하면 'undefined'로 평가되지만 실제로는 호출이 가능합니다. 이러한 평가 사실에 의존하는 코드는 역시 호환성 문제가 발생할 수 있습니다.
  • window.execScript 메서드, window.doScroll 메서드, script.onreadystatechange 이벤트, script.readyState 속성, document.selection 속성, document.createStyleSheet 메서드, style.styleSheet 속성은 완전히 제거되었으므로 typeof 식은 물론 실제로도 작동하지 않습니다.

Windows 8.1에 대한 호환성을 점검하고 계시다면, 위의 사항들을 잘 참고하시어 대비하는 것이 필요해보입니다.

Posted by 알 수 없는 사용자
Tech/HTML52012. 6. 4. 15:14


Webkit Keyframes Animation 실컷 구현해놓고, 안드로이드에서 돌렸을 때,

심장이 철렁한 경험을 했었는데요;

Keyframe Animation에 translate과 scale 속성이 변경되도록 해두었는데, translate만 동작하더라고요.

지금 생각해도 벌렁벌렁한 일이었네요. 아이폰에서만 확인했다가 =ㅅ=) 예상치 못한 난관을 맞닥뜨렸을 때의 심정이란...


WebkitTransition은 동작하기 때문에 구현 방식을 변경해야하는 고민이 있었습니다만...

저를 구원하는 사이트를 찾을 수 있었습니다.


http://blog.webcreativepark.net/2012/02/12-141313.html


위의 사이트에 한 일본 개발자 분께서 친절하게 안드로이드에서 Webkit Keyframes Animation을 적용하는 방법을 상세히 적어주셨습니다. 안드로이드에서도 Scale Aniamtion이 된다는 사실을 알게 된 저는 굉장히 기뻐했었는데요. (부끄부끄) 샘플 코드를 분석해서 문제를 찾을 수 있었습니다.

구현한 내용에는 문제가 없었습니다. css 에 적은 한 줄을 제거해야하더군요.


'-webkit-backface-visibility: hidden;'

'backface-visibility: hidden;'


backface-visibility 속성을 설정해 둔 한 줄을 제거하니 Scale Animation이 동작합니다. (감동)


혹여, 저처럼 안드로이드에서 scale 애니메이션이 동작하지 않아서 당황스러운 분들이 있을까 공유합니다...

(너밖에 없어 퍽!)

Posted by 알 수 없는 사용자
Tech/HTML52012. 6. 4. 14:57


제목에는 일단 오차가 발생하다고 했지만, 표현이 좀 이상하네요.


여튼, 요즘은 HTML5 관련 작업을 하고 있는데,

마주한 문제가 발생했을 때마다 기록해보려고 합니다.


크롬에서 Video, Audio 태그를 사용하여 미디어를 재생하는 중에 Pause했다가, 다시 바로 Play를 시키면,

currentTime, 즉 재생 시간이 0.8 ~ 1.0초 뒤로 점프하는 경우가 생깁니다.

예를 들어, 1.0초에서 Pause시킨 뒤, 바로 Play를 하면 2.0초쯤에서 재생이 시작됩니다.

처음엔 잘 몰랐는데, 황당한 경우가 발생한거죠;


딱히 해결책을 찾기 어려워서, Seek를 해봤습니다. 즉 재생 콘트롤러에서 드래깅하여 재생 시간을 이동한 뒤 재생을 시작해보니 제시간에 재생을 하더군요.


혹시나해서, Pause했을 때 currentTime을 0으로 설정했다가 다시 미디어 시간을 적용한 뒤 재생하니 점프하는 경우 없이 재생합니다.




이렇게 처리한 경우, 문제가 하나 있습니다.

Video 태그의 경우, Pause 했을 때 화면이 0초로 왔다 다시 제시간으로 돌아가는 모습을 볼 수 있습니다. -_-;

(꼼수는 꼼수일 뿐... )


Posted by 알 수 없는 사용자