904706 - Thimble pages not scrollable on iOS

Status: RESOLVED WONTFIX

(Webmaker Graveyard :: Thimble, defect)

Description

[Tobias Leingruber (@tbx)]

I can't scroll Thimble pages in Safari on Apple iOS.

I tested this with different Thimbl pages and on Ipad and Iphone. It didn't work.

Comment 1

[Pomax]

I have no iOs devices to test this with atm, reassigning.

Comment 2

[Jon Buckley [:jbuck]]

Yep, I can definitely replicate this locally. The problem appears to be an intentional change in iOS 5 that can be fixed by applying the following CSS styles to the parent container:

diff --git a/public/static/stylesheets/makedetails.less b/public/static/stylesheets/makedetails.less
index 0274240..2b575e3 100644
--- a/public/static/stylesheets/makedetails.less
+++ b/public/static/stylesheets/makedetails.less
@@ -171,6 +171,10 @@ body {
   -webkit-transition: top .2s ease-in-out;
   -o-transition: top .2s ease-in-out;
   -ms-transition: top .2s ease-in-out;
+
+  /* For iOS scrolling within iframe. Safariiiiiiii */
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
 }

The only problem with this CSS is that it displays two scrollbars on desktop browsers. Need to figure out a CSS or JS way to detect Safari Mobile and apply this CSS.

Comment 3

[Robert]

Going to pick this up

Comment 4

[Pomax]

assigning to you then, Robert =)

Comment 5

[Robert]

https://github.com/mozilla/thimble.webmaker.org/pull/237

Comment 6

[Robert]

Note that this fix is for iPads only. Is this ok or do we want iPhone support for Thimble?

Comment 7

[james]

I just shared a thimble and had several people complaining about this, and it's the same for me on iPhone Safari. Please fix!

Comment 8

[Brett Gaylor [:brett]]

I think we'd want this on iphone as well as ipad.

Comment 9

[David Humphrey (:humph)]

Attachment: https://github.com/mozilla/thimble.webmaker.org/pull/237

Kate, can you please finish up this review?

Comment 10

[inactivate account for kate]

Comment on attachment 815380 [details] [review]
https://github.com/mozilla/thimble.webmaker.org/pull/237

This needs to be moved to the mozilla/make-valet and not have a minimum value. Rob, can you ping me in IRC?

Comment 11

[Robert]

https://github.com/mozilla/make-valet/pull/23

Comment 13

[Jon Buckley [:jbuck]]

Attachment: https://github.com/mozilla/make-valet/pull/23/files

Comment 15

[Robert Friedman [:omnignorant]]

FYI, I just tried to view a thimble on my iPhone yesterday and there was no scroll.

Comment 16

[Gideon Thomas [:gideon]]

This isn't really an issue with the new https://thimble.mozilla.org but on iOS, the page is zoomed in too much (https://github.com/mozilla/thimble.webmaker.org/issues/1323). Doesn't look like we'll be supporting dev on iOS anytime soon though.