2013-09-30 11 views
7

Ho uno strano bug nei browser di iOS7 in cui le linee nere appaiono attorno agli elementi div. Ma quando si ingrandisce un elemento, queste linee stanno scomparendo. Qualcuno ha un'idea di cosa causa questo strano bug? In iOS6 non erano visualizzate linee. Sta accadendo su questo url: http://www.tristanfrencken.com/ios 7 browser-kit bordi neri attorno agli elementi div

Speriamo che qualcuno mi potrebbe aiutare con questo!

+0

Può darci qualche dettaglio in più, come quello che lo stile del bordo vostro usando ecc? Inoltre, forse include uno screenshot o due? – neelsg

+0

Ho provato ad aggiungere uno screenshot ma non mi è stato ancora permesso di pubblicare un'immagine. Il problema sembrava essere nel plug-in Isotop jquery che stavo usando. L'ho cambiato con il plugin di muratura e ora i bordi sono spariti. C'è ancora un bordo visibile nella parte inferiore dell'intestazione che ha la posizione: fissa. Quindi penso che abbia qualcosa a che fare con questa posizione. Non ho alcun tipo di bordo nel mio CSS per questi elementi. – Kneep

risposta

4

Stranamente, questo sembra essere attivato quando un elemento è fisso E ha un colore di sfondo, ma solo in IOS7 e non se ha un'immagine di sfondo. Lo avrei cancellato come un bug nel browser, ma come soluzione temporanea per ora potresti usare un'immagine bianca solida, affiancata, come sfondo del tuo header.

+0

fissando la posizione media: assoluta? – kuba

+0

No, intendo posizione: fisso – Greg

+0

hmmm, ho cancellato tutti gli elementi con posizione: risolto e avendo ancora questo problema, hai qualche consiglio in più forse? :) – kuba

0

Questo sembra essere un bug in iOS7 e nel nuovo Safari su OSX Maverick. Gli elementi sovrapposti con il colore di sfondo sembrano "addensare" i loro contorni causando questo strano comportamento. Sto cercando disperatamente una soluzione a questo.

ho iniziato un nuovo argomento su di esso qui iOS7/Mavericks Safari strange element border behaviour

0

Questo stava accadendo a me e aveva a che fare con il meta tag che consente di zoom

A quanto pare iOS Safari ha un problema con le cose di ridimensionamento e crea che artefatto

L'applicazione di un meta tag per disabilitare lo zoom risolto il mio problema (user-scalable = no)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
+1

Questo non lo fa davvero risolvere il problema, soprattutto se vuoi che la tua pagina sia zoomabile ... – Greg

3

Abbiamo Hade lo stesso problema nel nostro web app in cui div contenitore-elementi con colore di sfondo e posizionamento fisso otterrebbe bordi neri a vari valori di zoom in iOS 7.

La nostra prima soluzione ha coinvolto la conversione di colori di sfondo per base64 gli URL che ha funzionato abbastanza bene, ma non era abbastanza flessibile.

Invece abbiamo eliminato i bordi neri applicando border-radius: 1px; agli elementi del contenitore che rimuovevano tutti i bordi neri. Il valore è abbastanza basso da non essere visibile.

+0

stranamente il raggio di confine funziona –

0

Usa "background-image" proprietà con gli stessi gradi di pendenza:

background-image: -webkit-linear-gradient(top, #your_color, #your_color); 
Problemi correlati