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



## krug_s (26. Februar 2015)

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 ?

```
.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...


----------



## SpiceLab (27. Februar 2015)

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":

http://stackoverflow.com/questions/...rflow-scrolling-touch-prevent-viewport-bounce
http://stackoverflow.com/questions/...-element-but-keep-it-for-child-elements-in-io
Dass *-webkit-** ausschließlich vom Safari-Browser unterstützt wird, ist dir bekannt?

P.S. Fragen zu CSS-Problemen bitte im Fachforum posten


----------



## krug_s (27. Februar 2015)

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...


----------



## SpiceLab (27. Februar 2015)

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.


----------



## krug_s (28. Februar 2015)

Hmm position: relative aber brauche ich, sonst verrutsch alles  

Hmm das wird noch interessant wieso funkt. nicht..


----------



## SpiceLab (1. März 2015)

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 

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*

```
#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*

```
#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]​


----------

