I just finished the patch for the bug I’ve been working on. The end result was only a few lines of code but getting my environment set up was ridiculously time consuming. The instructions for setting Webmaker-suite up were specific for Windows 7 so naturally I ran into some problems on my Windows 8 machine. I filed a bug with a potential fix in case anyone else was having issues. With Webmaker suite set up I then had to find a way to get Thimble and its various dependencies accessible on my iPad. Unfortunately, even though the server was running locally on my network I couldn’t access Thimble on my iPad no matter how I configured my network. I ended up having to expose my localhost to the internet. I wrote a post outlining a rather brute force method though it’s probably not the best way.
With my environment set up and pages viewable on my iPad, I first attempted the JavaScript fix I proposed in a previous post. Long story short, it didn’t work. There isn’t a way to apply the “touch” value to the -webkit-overflow-scrolling property. I found a rogue Stack Overflow post that suggested using style.WebkitOverflowScrolling = ‘touch’; but it didn’t work. While looking for solutions I found a simple CSS media query that targets mobile devices (iPads in particular) with a screen width of 768 pixels.
@media only screen and (device-width: 768px) {
.thimble-project-container {
/* For iOS scrolling within iframe.*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
By using the device-width property, we can target mobile devices instead of laptops with smaller screens. I posted a pull request tonight and I’ll message someone tomorrow to take a look.