Opened 7 years ago

Closed 7 years ago

Last modified 4 years ago

#16170 closed defect (fixed)

Dialog: native overflow scrolling on ios5+

Reported by: lee Owned by: bill
Priority: undecided Milestone: 1.9
Component: Dijit Version: 1.8.1
Keywords: Cc:
Blocked By: Blocking:

Description

We've had several requests to improve scrolling features on dijit/Dialog content that overflows.
No scrollbars are ever shown on overflowed content, it's un-intuitive to a user and not obvious there is overflowed content.
Only IOS5+ supports -webkit-overflow-scrolling so this is a minor feature request.
Another option is mixing in "dojox/mobile/_ScrollableMixin" to a Dialog for other mobile versions, which I have working but doesn't feel right

Should this be something we do outside the toolkit or part of it considering mobile support changes so often?

Attachments (1)

ios5overflowscrolling.patch (1.3 KB) - added by lee 7 years ago.
ios overflow -webkit-overflow-scrolling patch

Download all attachments as: .zip

Change History (15)

Changed 7 years ago by lee

Attachment: ios5overflowscrolling.patch added

ios overflow -webkit-overflow-scrolling patch

comment:1 Changed 7 years ago by bill

Owner: changed from bill to lee
Status: newpending
Summary: native overflow scrolling on ios5+ dijit/DialogDialog: native overflow scrolling on ios5+

I'm confused, can you explain more?

My feeling is that on mobile, it's never a good idea to have internal scrollbars (ie, scrollbars on a <div> rather than on the viewport itself), but that's a big change for dijit.Dialog. Is that the problem you are talking about, or something more specific?

And why are you talking about iOS5 in particular? Isn't the usability issue across Dialog on all mobile devices and OS versions? I guess your patch only fixes Dialog on iOS5?

comment:2 Changed 7 years ago by lee

Status: pendingnew

Sorry, yes the issue is scroll bars on block elements with overflow:scroll and yes it effects every mobile device.
The problem we have is that while a dijit/Dialog looks fine on a desktop (and may display scrollbars), when it gets down to the size of mobile screens Dialog content will nearly always overflow, won't show scroll bars and doesn't make it obvious to the user there is overflowed content

About ios5, yes -webkit-overflow-scrolling is only supported on IOS5 and up, it effectively does the job of mobile/ScrollableView however #16012 doesn't make good reading.

Any advice would be appreciated for other options to pursue

comment:3 Changed 7 years ago by bill

Status: newpending

I'll think about it. Another question: what does adding webkit-overflow-scrolling achieve on IOS5 beyond the current behavior of Dialog? Single finger scrolling? Visible scrollbars even when not touching the screen?

BTW you should be able to set -webkit-overflow-scrolling in dijit.css; you don't need to modify the javascript source code.

comment:4 Changed 7 years ago by lee

Status: pendingnew

Thanks bill
Safari explain it here http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/articles/standardcssproperties.html
It looks native and doesn't show scrolls till dragged and uses inertial scrolling.

Regarding CSS, that's what I initially tried and it wasn't working on the device, I'm presuming it's caching and will try again tonight, however I thought it may have been due to _size() setting overflow: "auto" whenever a resize is called.

-webkit-overflow-scrolling does appear to be buggy though, I've seen a couple of blogs say to get better rendering safari needs to be forced to use hardware acceleration - through a noop webkit-transform: translate3d(0,0,0)

Alternatively I could look at virtual scrolling, something like http://jsfiddle.net/lbod/eAYsM/8/

comment:5 Changed 7 years ago by lee

Apologies, CSS alone is fine

.dijitDialogPaneContent  {-webkit-overflow-scrolling:touch; overflow:auto;} 

There's some very weird behaviour when pinch/zooming to the point it stops any scrolling however setting a viewport meta tag sorts it out

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Last edited 7 years ago by bill (previous) (diff)

comment:6 Changed 7 years ago by bill

Milestone: tbd1.9
Owner: changed from lee to bill
Status: newassigned

OK, I'll add that in; it will at least make things better for iOS6+ users. I don't think the overflow:auto is necessary though since Dialog already sets that programatically in the _size() method.

comment:7 Changed 7 years ago by bill

Resolution: fixed
Status: assignedclosed

In [29891]:

Use -webkit-overflow-scrolling so that Dialog scrolls better on iOS5+, fixes #16170.

comment:8 Changed 6 years ago by bill

In [31063]:

use -webkit-overflow-scrolling for all ContentPanes, not just Dialog, refs #16170.

comment:9 Changed 5 years ago by Colin Snover

bill, would you be comfortable with this fix being backported through to 1.7? It does not seem to negatively impact anything but I wanted to be sure before I went ahead and did it.

comment:10 Changed 5 years ago by bill

Sure, seems fine, thanks.

comment:11 Changed 4 years ago by Nick Nisi

Was this ever backported to 1.8 and 1.7? I'm not seeing -webkit-overflow-scrolling anywhere on the 1.8 or 1.7 branches. Were there any issues discovered with backporting this?

Last edited 4 years ago by Nick Nisi (previous) (diff)

comment:12 Changed 4 years ago by bill

Presumably the earliest version it's fixed in is 1.9. That's why the milestone on the ticket says "1.9".

comment:13 Changed 4 years ago by Nick Nisi

Right, ok. I wasn't sure because in comment:9 it was asked if it was ok to backport it through 1.7.

comment:14 Changed 4 years ago by bill

Oh good point, I didn't notice those two comments. OK, so I guess csnover planned to backport it but forgot?

Note: See TracTickets for help on using tickets.