Tri Vuong's Blog

Rants about Javascript, Rails, user interface design and other things

Category: Uncategorized

Some Webkit issues while developing a mobile website and how to fix them


Last month, I was helping my company Yellowpages with the launch of ProSelect, a program that aims to help consumers submit requests and choose qualified providers/contractors to handle their needs. I was working on the mobile website and found out a few issues/tricks that I would like to share in this post. Most of them are Webkit related issues, specifically mobile Safari and the default browser on Android (2x and 4x).

1. Things appear juddering, flashing in mobile Safari

Remedy: add -webkit-backface-visibility: hidden

2. Elements using ‘border-box’ box content make scrollbars appear when changing orientation of the device

Remedy: make sure the parent container have “overflow: hidden”

3. Returning a function value after calling “alert” causes mobile Safari to hang

Remedy: wrap the “alert” call in a setTimeout function. I was using 200 for the delay and it worked fine.

4. CSS3 -webkit-transform:rotate(x-deg) doesn’t work in Android 2x

Remedy: add a -webkit-transform: translate3d(0, 0, 0) to the parent element. Note, this issue occurred to me while I was testing in Galaxy S2 Note.

5. input[type=date] doesn’t work in the default Android browser (4x)

Remedy: unfortunately, at the time of this writing (April 2013) the implementation of input[type=date] is very inconsistent and buggy across all the browsers (mobile Safari, FF for Android, Chrome for Android, default Android browser etc). One way to fill the gaps and be consistent is to use a library like mobiscroll (mobiscroll.com)

6. Flashes and dark patches appear while scrolling a page in the default Android browser

Remedy: this issue happened to me while I was looking at a page that had a list of 120~ items, each of which is displayed in a box with some box-shadow applied. In the end I realized that limiting the list to 40~ items (about 3 pages) helped. Also removing the box-shadow reduced the repaint-chore for the browser and hence also helped (even though it might be against a particular design/styling interest)

7. The keyboard doesn’t go away and the cursor get stuck in textfields, textareas etc during form submission

Remedy: try document.activeElement.blur()

Nginx gotchas when used with Capistrano and SSL certificates


A couple of weeks ago, I was helping release a Rails app which requires SSL support and load balancing. The app runs on Unicorn, uses Nginx as a load balancer and Capistrano for deployment. In this post, I’ll describe the tips and tricks that I found a long the way.

First off, make sure you don’t have this line in your deploy.rb:

set :server_list, lambda { [fetch(:app_server)] }

Otherwise, Nginx won’t start

To verify that Nginx is running, do ‘ps -elf | grep nginx’, or look into the response header

Secondly, make sure that you have

proxy_set_header X_FORWARDED_PROTO https

Otherwise, you will run into an endless redirect loop which make your site inaccessible

Make sure that you have

server_name domain.com *.domain.com

Otherwise any request to page.domain.com will be redirected to http://.domain.com (yes this was shown in my browser address bar)

To ensure that you can grab the IP address of the client connecting to your site (and not your server instance), you need

proxy_set_header X-Real-OP $remote_addr

In order to support both ‘http’ and ‘https’, you should have these lines in the location /

Things I want to do in 2012


Learn Vim
Master TextMate
Become more adept with Unix, Rails, Javascript
Learn Cocoa
Learn Cappucino
Learn Objective-J and Objective-C
Learn Japanese
Enhance writing skills through blogging
Improve verbal communication
Lose some (more) weight