Artefakty linii w mobilnej przeglądarce Safari

Question

Safari renderuje czarne linie pomiędzy elementami div na mojej stronie internetowej w niektórych skalach. Jest to szczególnie złe, gdy rozbija się obraz, który jest podzielony na dwa różne elementy na przycisk lub coś podobnego. Nie mogę umieścić BG w rodzicu dwóch div, ponieważ są one przezroczyste .pngs. Jakieś rozwiązanie lub po prostu sobie z tym poradzić?

uchwycenia problemu, http://i.stack.imgur.com/pTLki.png

TravisO ma również ten sam problem, a ja zmieniłem, jak strona została rozplanowany, pierwotnie był to prosty stół z 5 rzędów, usunąłem wiersze i po prostu poszedł z obrazami i br, nadal się dzieje. Próbowałem usunąć całe wypełnienie i marginesy za pomocą CSS, ale było oczywiste, że problem nie polega na renderowaniu przeglądarki, ale z ponownym próbkowaniem przeglądarki ma ona na celu przekonwertowanie strony na rozmiar pasujący do ekranu. Można zobaczyć moje złamane stronę pod adresem:

http://www.apinkdoor.com/show/

Answer 1

TravisO, należy pozbyć się stylizacji img w CSS! Jeśli używasz tylko to:

<style type="text/css"> 
* 
{ 
    margin: 0px; 
    padding: 0px; 
} 

body 
{ 
    background-color: #f00; 
    text-align: center; 
} 
</style> 

powinien uczynić właściwie na iPhone!

Answer 2

Następujący plik CSS, dodany do problematycznego elementu div z określonym obrazem tła, jest dla mnie tym, który go naprawił. Wszystko poniżej 3 pikseli nadal pokazywałoby lekkie artefakty na niektórych poziomach powiększenia Safari.

margin-top: -3px; /* for Mobile Safari dark line artifact */ 
padding-top: 3px; /* for Mobile Safari dark line artifact */ 

Answer 3

Kwestia ta jest wynikiem błędu zaokrąglenia produkowanego w Mobile Safari kiedy to przeskalowanie obrazów tła na wyświetlaczu (jest to błąd: http://openradar.appspot.com/8684766).

Rozwiązaniem jest zwiększenie szerokości prawej krawędzi przycisku po lewej stronie o 1 lub 2 piksele. Następnie dostosuj odpowiednio CSS, aby dodane 1 lub 2 piksele nie były wyświetlane domyślnie.

Answer 4

Znalazłem zmianę koloru tła elementu z "szarą ramką" wokół niego.

Answer 5

Dodanie wartości initial-scale do metatagu widocznego obszaru rozwiązało ten problem.

<meta name="viewport" content="initial-scale=1.0">

Answer 6

miałem podobny problem podczas wyświetlania .png wizerunku w div-tag. Cienka (chyba 1 pikselowa) czarna linia została wyświetlona z boku obrazu. Aby to naprawić, musiałem dodać następujący styl CSS: box-shadow: none;