[Bug] Thimble pages not scrollable on iOS

The Bug

I got my first bug assigned to me! I tried to pick an easy bug so I could more smoothly familiarize myself with Thimble. The issue is fairly straight forward – I tried Thimble on my iPhone and iPad and indeed pages were not scrollable. Jon Buckley actually posted the CSS required to fix the problem:

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;
}

According to Buckley this causes two scrollbars to appear in desktop browsers. I made a test page in jsfiddle to see if I could replicate the two scrollbars but was unable to. The box does have kinetic scrolling on iOS 7 but I only see one scrollbar in Chrome and Safari so the issue might be Thimble-specific. Embedding my previous test page inside an iFrame inside jsfiddler did result in two scrollbars, but they were there regardless of the iOS CSS. I’ll have to add the code directly to Thimble to see what Jon meant.

The Fixes

Javascript

Assuming that Buckley is correct I’ll need to check what browser is accessing the page and apply the CSS conditionally. The simplest way to do this is by retrieving the user agent and applying a regular expression to determine the browser.

var userAgent = window.navigator.userAgent;

if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
   // iPad or iPhone
}
else {
   // Anything else
}

 CSS

Alternatively, I could use the screen media type query to detect a mobile browser and apply a style sheet specifically for mobile devices.

<link media="only screen and (max-device-width: 480px)" 
      href="mobile.css" 
      type= "text/css" 
      rel="stylesheet">

<link media="only screen and (-webkit-min-device-pixel-ratio: 2)" 
      href="retina.css" 
      type="text/css" 
      rel="stylesheet">

 

Since this is a small bug, I’ll try the JavaScript route first as it’s the least intrusive. If there are many mobile-related bugs and it’s decided that mobile support is going to be taken seriously, then an external style sheet will probably be the most flexible solution.

Aside: There seems to be an issue with -webkit-overflow-scrolling: touch being broken in iOS7. It worked for me but I’ll keep it in mind moving forward.