Merge pull request #1584 from mozilla/issue_1581_shifty_chrome_buttons

Fix for Chrome shifting the "Sign In" button in the email picker when clicking.

resources/static/dialog/css/popup.css

@@ -302,6 +302,16 @@ div#required_email {
 #selectEmail.center {
     position: static;
     overflow-y: visible;
+    /* The below 1px padding is part of a fix for a bug in webkit where there
+     * is a ghost padding-right to accommodate the scroll bar that is shown
+     * if there are many email addresses. The ghost padding caused the submit
+     * button to shift when the user clicked on it, sometimes making the
+     * submit button require two clicks.  The other half of the fix is in
+     * screen_size_hacks.js, where an adjustment to the width is made.
+     * These two in combination force Chrome to re-flow, which fixes its
+     * own bug.
+     */
+    padding-right: 1px;
 }
 
 .inputs {

resources/static/dialog/resources/screen_size_hacks.js

@@ -30,6 +30,18 @@
 
       if(height < $("#signIn .vertical").innerHeight()) {
         selectEmailEl.addClass("center");
+
+        /* The below width adjustment is part of a fix for a bug in webkit where
+         * there is a ghost padding-right to accommodate the scroll bar that is
+         * shown if there are many email addresses. The ghost padding caused the
+         * submit button to shift when the user clicked on it, sometimes making
+         * the submit button require two clicks.  The other half of the fix is
+         * in popup.css, where an adjustment to the padding is made.
+         * These two in combination force Chrome to re-flow, which fixes its
+         * own bug.
+         */
+        var width = selectEmailEl.width();
+        selectEmailEl.width(width);
       }
       else {
         selectEmailEl.removeClass("center");