태그 보관물: Internet Explorer

iPad 음악 앱, 아티스트 목록 따라하기

아이패드의 음악 앱에서 아티스트 목록으로 가서 가수를 선택하면, 해당 가수의 앨범 목록이 나옵니다.
위아래로 스크롤을 해보면 앨범 제목과 커버자켓 이미지가 스크롤영역 상단에 고정되어 보이죠. 이걸 jQuery를 사용해서 만들어 봤습니다.

iPad 음악, 아티스트 목록

다음의 기기 및 브라우저를 지원합니다.
PC의 파이어폭스, 크롬, 사파리 완벽 지원(jQuery 사용)
IE9, 오페라 부분 지원(iScroll을 사용하여 기능 구현)
iOS 기기(iPhone 3GS 이전, iPad 오리지널 제외) 부분 지원(iScroll을 사용하여 기능 구현)
IE8 이전 버전 미지원
안드로이드 미지원

파이어폭스, 크롬 및 사파리의 경우 jQuery와 scroll 이벤트를 사용하면 이상없이 잘 동작합니다.

그러나 IE9와 오페라의 경우에는 화면 상단에서 레이어가 떨리는 현상이 발생하기 때문에 iScroll을 사용해서 동작하도록 구현 했습니다. 이때 iScroll에 scroll 이벤트가 없고, 휠 스크롤의 거리 등의 문제로 인해, iScroll 4에 약간 수정을 가한 파일을 사용했습니다.

IE8 이전 버전은 iScroll에서 지원하지 않으므로 제외했습니다.

iOS 기기도 대부분 iScroll을 통해 지원하지만, 일부 구형 모델은 속도 문제로 지원하지 않습니다.

안드로이드는 갤럭시 S3, 넥서스원, 베가 등의 단말에서 테스트 해 봤는데, 문제가 많아서 제외시켜 버렸습니다. jQuery로 제어하면 상단 레이어가 떨리고, iScroll을 사용하면 속도가 느려지는 등 많은 문제들이 생기네요. 게다가 단말기 마다 차이가 나고, 한 기기에서도 브라우저 별로도 다르게 동작하는 등 문제가 있습니다.

IE10 이상 및 윈도우 모바일 등 위에 언급되지 않은 환경에서는 테스트 해보지 못했습니다. 혹시 확인해 보실 수 있으면, 댓글로 결과 알려주세요.

ps. 정말, 웹 작업을 하다보면 IE가 개판이라고 몸소 느끼지만, 모바일 작업을 해보면 안드로이드도 이에 뒤지지 않는다는 사실을 절감하게 되는군요.

IE8에서 border-collapse 사용 시 렌더링 문제

HTML에서 테이블을 사용할 때 border-spacingempty-cells 속성을 무시하고 테두리 디자인을 입히기 위해, CSS에서 border-collapse:collapse;를 사용하게 됩니다. 그런데 이게 IE8에서는 문제를 일으키네요.

보통의 경우에는 상관없으나, 테두리의 색상을 다르게 설정하는 경우에 아래 그림과 같이 세로 선이 가로선을 침범하여 테두리가 깨지게 됩니다. 다른 브라우저나 IE의 다른 버전에서는 이런 현상이 생기지 않으나, IE8에서만 문제가 됩니다.

해결 방법은 간단하게, 기본값인 border-collapse:seperate;를 사용하면 됩니다.

CSS/JavaScript로 만든 프로그래스 바

얼마전 AS3으로 짠 프로그래스 바를 CSS와 자바스크립트를 사용해서 비슷한 방법으로 만들 수 있네요. 물론 브라우저와 버전에 따라서 차이가 나긴 합니다. 일단 파이어폭스와 IE9, 맥용 사파리 에선 정상적으로 보이네요.
크롬이나 구버전의 IE 등에서는 border-radiusoverflow가 무시되거나 다르게 보여지는 경향이 있으므로, 이들 브라우저에서는 직사각형 형태로 만들어야 할겁니다.

우선 태그는 다음과 같이 2개의 DIV 태그를 사용해서 간단합니다.

<div class="progressbar shadow"><div class="progress embossed" id="progress"></div></div>

CSS로 각각의 DIV에 스타일을 입히고,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.progressbar{
	border-radius:10px;
	position:relative;
	width:250px;
	height:20px;
	background-color: #EFEFEF;
	overflow:hidden;
    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
}
.progress{
	border-radius:10px;
	position:absolute;
	left:-250px;
	width:250px;
	height:20px;
	background:url(/blog/wp-content/uploads/2012/11/test.gif) repeat-x 0px 0px;
    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
}

마지막엔 자바스크립트를 사용해서 backgroundPosiiton을 제어하는 것으로 마무리.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var p = 0;
var pct = 0;
function loading(){
	var prg = document.getElementById("progress");
	if(prg){
		p++;
		if(p >= 20){p = 0;}
		prg.style.backgroundPosition = p + "px 0px";
		pct++;
		if(pct >= 0){pct = -250;}
		prg.style.left = pct + "px";
	}
}
setInterval(loading, 50);

FP10 hangs uploading to .htpasswd protected directory.

Flash Player 10에서 .htpasswd를 사용하여 보호되는 디렉토리로 파일을 업로드하는 경우, 플래시 플레이어가 다운되는 문제가 발생합니다. 이 문제는 특히 FireFox에서 더 심각하여, FireFox에서는 아예 업로드가 불가능합니다. Flash Player 9에서도 비슷한 문제가 있었지만, 재차 업로드하면 되었으나, 10에선 아예 안됩니다.

재현1

  1. “Upload” 버튼 클릭하여 이미지 업로드
  2. 로그인 (test / test)
  3. 업로드 중지됨
  4. 브라우저 종료하면 브라우저 다운

재현2 (Internet Explorer)

  1. “Load” 버튼 클릭하여 이미지 로드
  2. 로그인 (test / test)
  3. 이미지 로드 완료되면 화면에 표시
  4. “Upload” 버튼 클릭하여 이미지 업로드
  5. 이미지 업로드 완료

재현2 (FireFox)

  1. “Load” 버튼 클릭하여 이미지 로드
  2. 로그인 (test / test)
  3. 이미지 로드 완료되면 화면에 표시
  4. “Upload” 버튼 클릭하여 이미지 업로드
  5. 로그인 (test / test). 로그인 팝업의 UI가 2번의 UI와 다름.
  6. 업로드 중지됨
  7. 브라우저 종료하면 브라우저 다운

이 문제를 피하려면, Flash Player에서 파일을 업로드하는 PHP 파일은 .htpasswd의 영향을 받지 않는 폴더에 위치하여, 로그인 과정이 없이 파일의 업로드가 이뤄지도록 해야 합니다. 또는 IE에서만 업로드가 가능하도록 하며, 업로드 전에 로그인을 거치도록 구성할 필요가 있습니다.

IE와 FF를 제외한 다른 브라우저에서는 테스트를 해보지 못했습니다. 다른 브라우저를 사용하는 사람들은 한 번 테스트 후에 결과를 코멘트에 남겨 주세요.

Flash Player 10 hangs when you upload a file to a directory protected with the .htpasswd feature. This is more critical in FireFox, uploading a file is impossible. The same problem occured in Flash Player 9, but you can upload files in the second try. In FP10, you can’t.

reproduce1

  1. Click “Upload” button to upload an image.
  2. Login. (test / test)
  3. Uploading process halts.
  4. Close the browse, and it crashes.

reproduce2 (Internet Explorer)

  1. Click “Load” button to load an image.
  2. Login. (test / test)
  3. After the loading finished, the image displayed.
  4. Click “Upload” button to upload an image.
  5. Uploading process finished successfully.

reproduce2 (FireFox)

  1. Click “Load” button to load an image.
  2. Login. (test / test)
  3. After the loading finished, the image displayed.
  4. Click “Upload” button to upload an image.
  5. Login (test / test). The UI of the Login popup is different from the procedure 2.
  6. Uploading process halts.
  7. Close the browser, and it crashes.

To avoid the problem, place the PHP file, that handles the uploaded file from Flash Player, on a directory which is not affected by .htpasswd. Or filter browsers to accept only IE, then, put the login process before upload a file.

I tested in IE and FF. If you tested in other browser, please leave a comment about the result.

Flash Player 10で .htpasswdを使って保護されているフォルダにファイルをアップロードする場合、Flash Playerがクラッシュする問題があるんです。これはFireFoxでもっとひどくて、FireFoxではファイルのアップロードが不可能です。Flash Player 9も同じ問題があったが、再びアップロードすればできたのに、10は全然ダメ。

再見1

  1. “Upload”ボタンをクリックして、イメージをアップロード。
  2. ログイン (test / test)
  3. アップロードが中止される。
  4. ブラウザを閉じると、クラッシュ。

再見2 (Internet Explorer)

  1. “Load”ボタンをクリックして、イメージをロード
  2. ログイン (test / test)
  3. ロードが終わったら、イメージが表す。
  4. “Upload” ボタンをクリックして、イメージをアップロード。
  5. アップロード終了。

再見2 (FireFox)

  1. “Load”ボタンをクリックして、イメージをロード
  2. ログイン (test / test)
  3. ロードが終わったら、イメージが表す。
  4. “Upload” ボタンをクリックして、イメージをアップロード。
  5. ログイン (test / test). ログインウィンドーのUIが2番目と違う。
  6. アップロードが中止される。
  7. ブラウザを閉じると、クラッシュ。

もの問題を回避する為には、Flash PlayerからファイルをアップロードするPHPファイルを.htpasswdの影響のないフォルダに置く。他にはIEだけでアップロードが出来るようにし、アップロードの前にログインさせる必要があります。

私はIEとFFしかテストして見ました。他のブラウザでテストした方は、コメントを残してください。

Useful browser add-ons.

I was a bit suprised when I worked with several Flash developers and Web developers. Becuase they didn’t know about the following browser add-ons, useful tools on debugging. So, here I introduce these extensions.
플래시 개발자나 웹 개발자들과 같이 작업을 하면서 많은 개발자들이 모르고 있는 것 같아서, 알아두면 매우 편리한 브라우저 애드-온 몇 가지를 소개합니다. 디버깅 등의 작업에 정말 많은 도움이 됩니다.
色んなフラッシュ開発者やウェブ開発者と作業しながら、少しびっくりしました。なぜなら、多くの開発者たちがこのアドオンに就いて全然知らなかったからです。だから、便利なアドオンを紹介します。デバグする時本当に役に立ちます。

Firefox Add-ons

Internet Explorer Add-ons