From bc4ad027e0cef8328569d5a2e913b553a7f02369 Mon Sep 17 00:00:00 2001
From: BrandonLWhite <brandonlwhite@gmail.com>
Date: Fri, 7 Feb 2014 12:18:20 -0600
Subject: [PATCH] Resolved issue with FlashOfUnstyledContent (FOUC) when using
 jQuery Mobile.

---
 js/jquery.keyboard.extension-mobile.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/js/jquery.keyboard.extension-mobile.js b/js/jquery.keyboard.extension-mobile.js
index a5e8768d..3756dc54 100644
--- a/js/jquery.keyboard.extension-mobile.js
+++ b/js/jquery.keyboard.extension-mobile.js
@@ -63,10 +63,21 @@ $.fn.addMobile = function(options){
 				base.mobile_setup();
 			}
 
-			// Setup mobile theme on keyboard once it is visible
-			base.$el.bind('visible.keyboard', function() {
+			// Setup mobile theme on keyboard once it is visible.
+			// Note: There is a 10ms delay after the keyboard is displayed before it actually fires 'visible.keyboard'. 
+			// Since we are restyling here, the user will experience FlashOfUnstyledContent (FOUC).
+			// This is avoided by first setting the visibility to hidden, then after the mobile styles are applied we 
+			// set it visible.
+			//
+			base.$el.on('beforeVisible.keyboard', function () {
+				if (base.mobile_initialized !== true) {
+					base.$keyboard.css("visibility", "hidden");
+				}
+			})
+			.on('visible.keyboard', function () {
 				if (base.mobile_initialized !== true) {
 					base.mobile_setup();
+					base.$keyboard.css("visibility", "visible");
 				}
 			});