From 9764ef579abb7c274d135baf7a57305e854e9da7 Mon Sep 17 00:00:00 2001
From: Nathan Bell <nathan@argenticsoftware.com>
Date: Mon, 14 Jan 2013 04:15:30 -0800
Subject: [PATCH] Fix double-tables in FF near responsive boundary

FireFox calculates window width differently in media queries than it does in JavaScript.  When responsive tables is viewed in FireFox at window widths near the responsive cut-off (ex: 768px), double tables can appear because the JavaScript has cloned the table in the HTML but the media query selectors haven't kicked in.
---
 responsive-tables.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/responsive-tables.js b/responsive-tables.js
index 030007f..18e6fe8 100644
--- a/responsive-tables.js
+++ b/responsive-tables.js
@@ -1,14 +1,20 @@
 $(document).ready(function() {
   var switched = false;
   var updateTables = function() {
-    if (($(window).width() < 767) && !switched ){
+    var mediaQueryWidth = 767;
+    var scrollBarWidth = 0;
+
+    if ($.browser.mozilla)
+      scrollBarWidth = window.innerWidth - jQuery("body").width();
+
+    if (($(window).width() < mediaQueryWidth - scrollBarWidth) && !switched ){
       switched = true;
       $("table.responsive").each(function(i, element) {
         splitTable($(element));
       });
       return true;
     }
-    else if (switched && ($(window).width() > 767)) {
+    else if (switched && ($(window).width() > mediaQueryWidth - scrollBarWidth)) {
       switched = false;
       $("table.responsive").each(function(i, element) {
         unsplitTable($(element));