Problema con dispositivi mobili apple

[simba92]

Ciao a tutti! Ho messo finalmente online il mio primo sito internet e ho notato un piccolo problema.. ovvero.. funziona bene sia da pc che su mobile si vede bene... eccetto che per dispositivi iOS.. su iphone e ipad mi da problemi.... innanzi tutto lo sfondo.. è un'immagine posizionata fissa.. il codice CSS usato è:

body {
background: fixed center center no-repeat url(immagini/sfondo.jpg);
background-position: top;
font-family: 'Kelly Slab', cursive;
color: #DDD;
}

con questo codice lo sfondo resta fisso dappertutto meno che su iphone e ipad... li è come se fosse un'immagine posizionata dietro ma che fa comunque parte del flusso del documento... e quindi si interrompe e si sposta con lo scroll...

Poi...

Altro problema con il menu... il menu ha un effetto hover con menu a tendina... questo menu funziona anche da iphone ma solo dalla home page... questo il codice:

#drop-menu {
margin: 35px auto 0 auto;
padding: 0;
border-top: 4px solid #F00;
text-align: center;
width: 941px;
}


/*menu*/


ul#menu {
margin: 0 auto;
padding: 0;
text-align: center;
list-style: none;
float:left;
width: 100%;
background: #111427;
font-size:80%;
border-radius: 0 0 10px 10px;
}


ul#menu li {
margin:0;
padding:0;
float:left;
display: block;
position: relative;
}


ul#menu li:first-child > a {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 0px 0px 0px 10px;
border-radius: 0px 0px 0px 10px;
}


ul#menu ul li:first-child > a{
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}


ul#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
}


ul#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #fff;
}


.radiusright {
border-radius: 0 0 10px 0;
}


.radiusbottom {
border-radius: 0 0 10px 10px;
}


ul#menu li a {
float: left;
padding: 7px 46px;
color: #fff;
text-transform: uppercase;
text-decoration:none;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}


ul#menu li a.paddingridotto {
padding: 7px 38px;
}


ul#menu li a:hover {
background: -webkit-gradient(linear, left center, right center,
color-stop(0.05, #111427),
color-stop(0.5, #213E77),
color-stop(0.95, #111427));
background:
-moz-linear-gradient(left center, #111427 5%, #314E87 50%, #111427 95%);
color:#fff;
}


ul#menu ul {
width: 100%;
margin:2px 0 0;
padding:0;
display:inline-block;
list-style: none;
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index:99999;
/*background: -webkit-gradient(linear, left center, right center,
color-stop(0.05, #111427),
color-stop(0.5, #213E77),
color-stop(0.95, #111427));
background:
-moz-linear-gradient(left center, #111427 5%, #314E87 50%, #111427 95%);*/
background: #111427;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
border-radius: 0 0 10px 10px;
}


ul#menu li:hover ul {
opacity: 1;
visibility: visible;
}


ul#menu ul li {
float: none;
display: block;
border: 0;
width: 100%;
}


ul#menu ul a {
margin: 0 auto;
padding: 10px 0;
width: 100%;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}


ul#menu ul a:hover {
background: -webkit-gradient(linear, left center, right center,
color-stop(0.05, #111427),
color-stop(0.5, #213E77),
color-stop(0.95, #111427));
background:
-moz-linear-gradient(left center, #111427 5%, #314E87 50%, #111427 95%);
color:#fff;
}

a cosa potrebbe essere dovuto??? Grazie!

PS: il sito se volete vedere l'effetto sui cell è redsoxpaterno.com

ciao ciao!!!

[Prill]

il giusto ordine per le proprietà è

background-color
background-image
background-repeat
background-attachment
background-position

nel caso delle abbreviazioni con "background" quell'ordine andrà rispettato per i valori, se anche siano visualizzati "correttamente" quando messi alla rinfusa non è detto che tutti i browser si comportino alla stessa maniera

quanto al menu, non ho iphone per verificare il problema, ma se il menu funziona sulla home dovrebbe farlo pure sulle altre pagine (confronta il codice, il richiamo di script e del css e l'html)

[Shores]

Per il background, il fatto che dopo aver usato background usi background-position significa che quest'ultima impostazione sovrascriverà quella data da background.

Per il menu, semplicemente tutto ciò che si basa su hover per funzionare non funzionerà sui dispositivi touch, o perlomeno sarà terribilmente scomodo da usare; se vuoi che il tuo sito sia usabile su touch screen fanne una versione che non necessita di hover!

[Prill]

Per il menu, semplicemente tutto ciò che si basa su hover per funzionare non funzionerà sui dispositivi touch, o perlomeno sarà terribilmente scomodo da usare;

non è proprio così...

[Shores]

non è proprio così...

E com'è ?

Seriamente, mi interessa sapere che ne pensi, perché al di là del fatto che tecnicamente i browser per dispositivi touch supportano tutti lo hover, io non ho ancora trovato un solo sito che abbia i menu drop down basati su hover che sia comodo da utilizzare su un tablet...

Insomma, non sto sostenendo che tecnicamente non sia supportato, sto solo dicendo che, a mio avviso, è un incubo ergonomico!

Per cui sono seriamente curioso di sapere come la pensate!

[Prill]

non hai hover ma il menu si apre al click, non si chiude spostandosi, ma si chiude al successivo click.
Dipende poi da come è costruito il menu, e se hai più livelli per i sottomenu, o dal numero delle voci (ma qui non è più tanto un problema di hover ma di caterve di elementi a comparsa che fisicamente non entrano nello spazio a disposizione). Una pagina costruita con ponderazione regge bene anche su dispositivo mobile

[Shores]

Si apre al tocco un menu che deve apparire tramite :hover css?

Forse questo accade se lo :hover viene applicato a qualcosa che non è a sua volta un link, ma nel caso lo si applichi a un tag A (come fino a poco tempo fa era obbligatorio, visto che IE non lo accettava su nient'altro...) quel che succede è che non appena tocco si attivano entrambi (lo hover e il link stesso) e immediatamente vengo portato alla pagina che è destinazione del link stesso, nella quale naturalmente ciò che doveva apparire su hover è di nuovo invisibile, se c'è ancora...

Insomma, secondo me lo hover non dovrebbe più essere usato per nulla che sia indispensabile, perlomeno nella versione mobile dei siti...

Comunque su Chrome per android il menu del sito in questione funziona bene, anche non in home page...

[Prill]

Si apre al tocco un menu che deve apparire tramite :hover css?

Forse questo accade se lo :hover viene applicato a qualcosa che non è a sua volta un link, ma nel caso lo si applichi a un tag A (come fino a poco tempo fa era obbligatorio, visto che IE non lo accettava su nient'altro...) quel che succede è che non appena tocco si attivano entrambi (lo hover e il link stesso) e immediatamente vengo portato alla pagina che è destinazione del link stesso, nella quale naturalmente ciò che doveva apparire su hover è di nuovo invisibile, se c'è ancora...

Insomma, secondo me lo hover non dovrebbe più essere usato per nulla che sia indispensabile, perlomeno nella versione mobile dei siti...

Comunque su Chrome per android il menu del sito in questione funziona bene, anche non in home page...

Avevi scritto in precedenza che lo stato hover rendeva inaccessibile un menu, e non è così, con uno stato hover il menu si attiva toccandolo (chiamalo touch, chiamalo click). Se la prima voce è comunque un link non cambia nulla perché non apre in realtà un collegamento ma solo il menu.

[Shores]

Perdonami, ma no, non è per niente vero: per esempio qui:

http://www.8cento.org/

Se cerchi di usare il menu attività/repertorio/etc, è quasi imposiibile selezionare le voci del sottomenu di "attività", perchè la voce "attività" che ha lo hover è anche un link, e appena lo tocchi carica una pagina...

Ma forse non riesco a farmi capire...

[Prill]

ti rispondevo in precedenza dal telefono e non potevo soffermarmi molto sulla risposta.
Con un dropdown, l'elemento che appare, pur utilizzando il tag a, può non inviare a nessuna pagina, svolgendo la funzione di aprire un menu sottostante, se poi si inseriscono più istruzioni su un unico elemento è altro discorso, e fra l'altro questo può essere fastidioso e fuorviante anche su pc.
Potrei farti esempi di pagine che usano i dropdown nell' altra maniera e non hanno problemi.
Il senso del mio intervento iniziale era che questa affermazione

tutto ciò che si basa su hover per funzionare non funzionerà sui dispositivi touch, o perlomeno sarà terribilmente scomodo da usare;

era generalizzante, categorica, e da prendere con le opportune cautele, lasciando intendere che una pagina sarebbe stata inutilizzabile su dispositivi mobili (e così non è, dipende dal menu).

Insomma, non sto sostenendo che tecnicamente non sia supportato, sto solo dicendo che, a mio avviso, è un incubo ergonomico!

anche l'incubo ergonomico dipende da come è fatto il menu, ne ho visti alcuni che hanno tante di quelle sottovoci da uscire dalla finestra del browser su monitor con alta risoluzione, altri che se non ti muovi con precisione millimetrica sul sottomenu questo scompare prima che possa spostarti sul link.

Poi che alcuni menu generino molti problemi su mobile pure è vero (non nel caso di chi ha aperto questa discussione che il menu lo vedeva funzionare su alcune pagine e per qualche errore non sulla home), ma non facciamo spaventare chi usa l'hover