webkit-overflow-scrolling: touch; orientation change issue

Question

Okay, so I have a fixed position div that has a specified width. When the content is long enough to require overflow in one device orientation (landscape), but not the other (portrait) scrolling stops working if the device changes orientation.

This issue occurs with iOS7 (unable to test previous versions)

Here is the address of the example: https://r3dux.com/css/overflow.php

Here is an illustration of the issue:

overflow issue

Yes, I tested it in iOS7 and iOS6 and both worked perfectly fine. — David Corbin
– David Corbin, Commented May 27, 2014 at 16:19
Weird, I've tested it in iOS simulator, on my iPhone, and iPad (with more content) and it stops working when orientation is changed. — CJT3
– CJT3, Commented May 27, 2014 at 16:20
Maybe go into Safari and change your User Agent to an iOS device User Agent and see if it works properly. — David Corbin
– David Corbin, Commented May 27, 2014 at 16:24
It works fine on desktop safari... that's not the issue. I not sure I see how changing the user agent will affect a browser's behavior like that. — CJT3
– CJT3, Commented May 27, 2014 at 16:25
Apparently if you redraw the div on orientation change it works again. (toggle display: block; to display: none; and back to display: block;) - really annoyed that this is needed. — CJT3
– CJT3, Commented May 27, 2014 at 16:33

Onur Doğan · Accepted Answer · 2024-03-20 03:38:43Z

7

I fixed that problem with CSS.

@media (orientation: landscape) {
 .webkit-scroll-container > * {
   -webkit-animation: fixWebkitOverflowScroll 1s;
 }
 @-webkit-keyframes fixWebkitOverflowScroll {
   0% {
     padding-bottom: 1px;
   }
   100% {
     padding-bottom: 0px;
   }
 }
}

Just put it inside your stylesheet, assign the class .webkit-scroll-container and everything will work as expected. I just animate the height, which triggers a reflow/redraw of the scroll container.

edited Mar 20, 2024 at 3:38

Onur Doğan

2,11612 gold badges35 silver badges60 bronze badges

answered May 28, 2014 at 17:04

czuendorf

8636 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CJT3 Over a year ago

does this fix the ovelaying issue? (if the is a div over the fixed div, the scrolling goes to the fixed div)

czuendorf Over a year ago

Assume something like that: <div class="scroll" style="-webkit-overflow-scrolling:touch;"><div class=".content">Your actual content</div></div>

Collectives™ on Stack Overflow

webkit-overflow-scrolling: touch; orientation change issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related