Scrollen auf iPad funktioniert nicht -webkit-overflow-scrolling: touch;

krug_s

Mitglied
Hallo

Ich versuche meine Website (einen div Inhalt) auf meinem iPad zu scrollen, es funktioniert nicht, ist wie blockiert, bzw. die ganze Seite wird nach oben-unten verschoben mit Navigation... (iPad 2)

Sollte doch mit: -webkit-overflow-scrolling: touch; funktionieren oder nicht ?
CSS:
.className{
width:540px;
height: 500px;
padding-left:6px
padding-top:3px;
position:relative;
overflow-y:scroll;
overflow-x:hidden;
border-radius:3px;
-moz-border-radius:3px;
-webkit-overflow-scrolling: touch;
}


Vielen Dank...
 
Nach der padding-left-Regel fehlt das abschließende Semikolon, wodurch die erste darauffolgende (padding-top-)Regel vom Browser ignoriert wird. Lediglich die letzte Regel eines Regelblocks darf ohne Semikolon deklariert werden.

Ansonsten scheint dies wohl ein gängiges Problem zu sein, dass die Seite beim Scrollen "hüpft/springt":
Dass -webkit-* ausschließlich vom Safari-Browser unterstützt wird, ist dir bekannt?

P.S. Fragen zu CSS-Problemen bitte im Fachforum posten ;)
 
Zuletzt bearbeitet:
Hallo

Das Semikolon habe ich, ich habe es nur hier vergessen beim tippen..tippfehler :)

Hmm frage mich aber wieso funktioniert -webkit-overflow... Unter: http://eliassorensen.com/demos/ios-smooth-scroll.html

Und das ebenfalls auf einem iPad 2



Sorry für Fachforum, ist doch CSS nicht HTML :/


P.S im iPhone 5S kann ich scrollen aber iPad nicht...komisch...
 
Zuletzt bearbeitet:
Vergleich mal die Stylesheets. Dort taucht kein position:relative auf, und es heißt lediglich overflow:scroll anstelle von overflow-y:scroll und overflow-x:hidden.

Vielleicht hilft dir das weiter.
 
Deiner Antwort entnehme ich, dass du in keinem Ausschlußverfahren überprüft hast, an welcher der beiden Eigenschaften es hängen könnte.

Mangels iMobile kann ich das leider nicht durchspielen :D

Die CSS-Vorlage deines entdeckten Demos http://eliassorensen.com/demos/ios-smooth-scroll.html lässt sich nämlich wunderbar ganz fix in zwei Schritten ändern, um zu schauen, ob, und wenn ja, wie sie sich auswirken:

1. overflow-Regel differenzieren
CSS:
#scrollme {
margin: 20px;
width: 300px;
height: 300px;
border: 4px solid red;
border-radius: 15px;
padding: 10px;
/*overflow: scroll;*/ /* auskommentiert */
/* differenzierte overflow-Regel */
overflow-y:scroll;
overflow-x:hidden
}
.smooth {
-webkit-overflow-scrolling: touch;
border-color: green !important;
}
2. position:relative hinzufügen
CSS:
#scrollme {
margin: 20px;
width: 300px;
height: 300px;
border: 4px solid red;
border-radius: 15px;
padding: 10px;
/*overflow: scroll;*/ /* auskommentiert */
/* differenzierte overflow-Regel */
overflow-y:scroll;
overflow-x:hidden;
/* position:relative-Regel */
position:relative
}
.smooth {
-webkit-overflow-scrolling: touch;
border-color: green !important;
}

Wenn sich dadurch noch immer nichts ergibt, versteckt sich die Ursache in deinem übrigen CSS-Code.
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Zurück