2009-09-03 14 views
17

Używam niektórych półprzezroczystych plików PNG jako obrazów tła na różnych stronach internetowych. Są to zazwyczaj coś w rodzaju obrazu 1x1 z 30-procentową nieprzejrzystą białą warstwą.Alfa przezroczyste pliki PNG nie wyświetlają się poprawnie w przeglądarce Safari w przeglądarce

Zauważyłem, że Mobile Safari nie wyświetla ich poprawnie, nadając im ciemniejszy/szary odcień.

Czy jest to błąd MobileSafari (nie mogłem sobie tego wyobrazić), czy też muszę zrobić coś innego, albo na moich stronach lub w PNG?

(Oto jak utworzyć PNG: W programie Photoshop utwórz przezroczyste płótno 1x1) Narysuj biały prostokąt w warstwie 1. Ustaw krycie na, powiedzmy 30 procent, Zapisz jako 4-bitowy plik PNG z przezroczystością.)

+0

Zauważyłem, że nie jest to w 100% spójne. Na jednym ładunku widziałem, jak to jest idealnie, aż do linii 80 procent (gdzie jest przerwa prosto przez 80 rzędów, ciemnoszara poniżej tego punktu). Kiedy odświeżam, problem pojawia się na całej stronie (a kolejne przeładowania również go zepsują). Myślę, że to może być błąd charakterystyczny dla mojego iPhone'a lub oprogramowania.Spróbuję zrestartować, a jeśli to się nie uda, przeinstaluję całe oprogramowanie (i, w przypadku awarii, otrzymam nowy telefon :)). – worksology

+0

Linki są martwe:/ – Will

+1

Zamknięte jako zbyt zlokalizowane? Wesoły. Zasadniczo ma to zastosowanie, a ponad 3 lata później jest nadal w 100% istotne w przypadku iOS 6 Mobile Safari. –

Odpowiedz

72

Próbowałem zrobić proste tła DIV przy użyciu 1-pikselowego pliku PNG z częściową przezroczystością w celu utworzenia półprzezroczystego pola dla tekstu nad obrazem tła. Wyglądało to świetnie we wszystkich przeglądarkach, dopóki nie wypróbowałem iPhone'a. Robiła częściową przezroczystość, ale z tym dziwnym szarawym odcieniem mówisz zamiast oczekiwanych rezultatów.

Następnie wypróbowałem te połączone czerwone, niebieskie testy &. Oboje wyglądali dobrze po raz pierwszy, gdy je oglądałem, a uderzenie w odświeżenie sprawiło, że zaczęli szaro! Spróbowałem ponownie z nowym oknem przeglądarki i znów wyglądało to dobrze, a niespójność, o której wspomniałeś, znów uderza. Cóż, po prostu physiscally obrócony iPhone, a jak to się stało od orientacji poziomej do trybu portretu kolory przesunięte do szarych wersji!

Wszystkie testy przezroczystości częściowej W3C PNG wyglądały idealnie na iPhonie. Zrobiło się jednak nieudane test Gamma. Po wykluczeniu gamma jako możliwej przyczyny ścigałem go przez kilka godzin, ale nie udało mi się. Zrobiłem nawet własny gradient, który przeszedł całą drogę od 0 do 100% przezroczystości, aby upewnić się, że nie był to proces tworzenia obrazu. Oczywiście, że działało idealnie, więc mój proces jest dobry.

Potem miałem ten błysk geniuszu, co jeśli plik był większy niż 1 piksel? Więc zrobiłem to 2 piksele szerokości i 1 piksel wysoko, 20% przezroczystości (alfa 80%). Bam..działa! Próbowałem wszystkich kombinacji 1x1, 1x2, 2x1, 2x2, 8x8. Wszystkie z nich działały poprawnie, z wyjątkiem wersji z pojedynczym pikselem.

Wróciłem i sprawdziłem powyższe testy połączone i widzę, że używają one 1 piksela dla wszystkich odcieni. Ah ha!

I masz to, Mobilna przeglądarka Safari potrzebuje co najmniej 2 pikseli do pracy z półprzezroczystymi plikami PNG.

0

Po obejrzeniu stron na obu urządzeniach (mój Mac i mój iPod Touch), myślę, że to, co tu widzicie, różni się tym, jakie kolory mogą generować ekrany, a nie błędem w każdym silniku renderującym. Istnieje wiele czynników, które mogą wchodzić w tego rodzaju różnice, np. Kontrast w przenośnym wyświetlaczu może nie być tak wielki, aby oszczędzać energię, czynić urządzenie tańszym, itp.

3

Użyj obrazu o wymiarach innych niż 1x1.

(odpowiedź skrócona dla tych, którzy mają rzeczy do zrobienia)