여러 웹 사이트에서 일부 반투명 PNG를 배경 이미지로 사용하고 있습니다. 이들은 일반적으로 30 % 불투명 한 흰색 레이어가있는 1x1 이미지와 비슷합니다.Mobile Safari에서 알파 투명 PNG가 올바르게 표시되지 않습니다.
모바일 사파리가 올바르게 표시되지 않아 어둡거나 칙칙한 색조가 나타납니다.
이것은 MobileSafari 버그 (상상할 수없는 버그)입니까, 아니면 내 페이지 또는 PNG에 다른 것을해야 할 필요가 있습니까?
(Photoshop에서 1x1 투명 캔버스를 만들고 레이어 1에 흰색 사각형을 그립니다. 불투명도를 30 %로 설정, 투명도가있는 24 비트 PNG로 저장)
배경 그림 위에있는 일부 텍스트에 반투명 상자를 만들기 위해 부분 투명도가 적용된 1 픽셀 PNG를 사용하는 간단한 DIV 배경. iPhone을 사용하기 전까지는 모든 종류의 브라우저에서 멋져 보였습니다. 부분적으로 투명하게 처리하고 있었지만 예상치 못한 회색 음영으로 예상되는 결과 대신 말합니다.
그런 다음 연결된 빨간색 & 파란 테스트를 시도했습니다. 그들은 처음에 내가 그들을 보았을 때 둘 다 괜찮아 보였고, 그때 새로 고침을하면 회색으로 변했습니다. 나는 새로운 브라우저 창으로 다시 시도했다. 그리고 그것은 당신이 언급했던 불일치를 다시금 알았다. 그렇다면 필자는 phyiscally 아이폰을 회전 시켰고, 가로 모드에서 세로 모드로 갈수록 색상은 회색 버전으로 바뀌었다!
모든 W3C PNG 부분 투명도 테스트는 iPhone에서 완벽하게 보였습니다. 그러나 감마 테스트는 실패했습니다. 가능한 원인으로 감마를 배제한 후, 나는이 것을 몇 시간 동안 사냥했지만 아무데도 가지 않았다. 심지어 이미지를 만드는 과정이 아닌지 확인하기 위해 0에서 100 %까지 투명하게 진행되는 내 자신의 그라디언트를 만들었습니다. 물론 완벽하게 작동했기 때문에 프로세스가 좋습니다.
나는이 천재성의 뇌졸중을 겪었습니다. 파일이 1 픽셀보다 큰 경우 어떻게 될까요? 그래서 2 픽셀 너비로 만들었고 1 픽셀 높이, 20 % 투명도 (80 %의 알파). Bam .. 일 했어! 나는 1x1, 1x2, 2x1, 2x2, 8x8의 모든 종류의 조합을 시도했다. 단일 픽셀 버전을 제외하고는 모두 제대로 작동했습니다.
나는 위의 링크 된 테스트를 점검하여 모든 음영에 대해 1 픽셀 이미지를 사용하고 있음을 확인했습니다. 아하!
그리고 거기에 반투명 PNG 파일을 사용하려면 모바일 Safari에서 2 픽셀 이상이 필요합니다.
두 장치 (내 Mac 및 iPod Touch)에서 사이트를 본 후 렌더링 엔진에서 버그가 아닌 화면의 색상 차이가 발생했다고 생각합니다. 이런 종류의 차이에 들어갈 수있는 많은 요소가 있습니다. 예를 들어 휴대용 디스플레이의 명암비는 전력을 보존하고 장치를 더 저렴하게 만드는 데 큰 효과가 없을 수 있습니다.
1x1이 아닌 다른 크기의 이미지를 사용하십시오.
(할 일이있는 사람들을위한 축약 된 응답)
나는 100 % 일관성이없는 것으로 나타났습니다. 한 번의로드에서 80 % 라인까지 완벽하게 렌더링되는 것을 보았습니다 (80 줄을 직선으로 끊고 그 아래 어두운 회색이있는 곳). 새로 고침 할 때 문제는 전체 페이지에서 발생하며 이후의 재로드에서는 손상된 것으로 표시됩니다. 이것이 내 iPhone 또는 소프트웨어의 특정 버그 일 수 있습니다.난 재부팅을 시도하고 실패, 모든 소프트웨어를 다시 설치 (그리고 실패, 새 전화지고 :) :)). – worksology
링크가 작동하지 않습니다 :/ – Will
너무 현지화 된 상태로 마감 되었습니까? 들썩 들썩 한. 이는 일반적으로 적용 가능하며 3 년이 지난 후에도 iOS 6 Mobile Safari와 100 % 관련성이 있습니다. –