Google Chrome 38 Bug with Multiple Select / Multi-select and off-page or wizard style Web UI

Hey All,

This may cover a very specific set of people and the solution is not elegant but it works.

Setup

The issue arose only in Chrome 38 (so very recently) and although it came up in my specific situation, it may apply to others as well.

The application I was dealing with had a wizard style UI that was all controlled in javascript and CSS. That is, I loaded all the wizard pages at once, and the "next page" and "previous page" functionality was just sliding the pages along - no reloads.

More specifically, it looked something like this:

<div class='wizard-pages-wrapper'>
  <div class='wizard-pages'>
    <div class='wizard-page'>...</div>
    <div class='wizard-page'>...</div>
    <div class='wizard-page'>...</div>
  </div>
</div>

The idea is that the .wizard-pages-wrapper had a overflow hidden and that the "next page" and "previous page" would slide along by just adjusting the "margin-left" of the .wizard-pages div. This isn't anything new - just google wizard style web UI and you'll understand.

Issue

So the issue was this. On page 2 of my wizard, I had a multi-select box:

<select multiple='multiple'>
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

On page 1, I had 3 choices for the user to make. Once the user makes a selection, the first thing my javascript code does is clear the multi-select box so that the user starts with a clean form. It does this BEFORE actually sliding to the left to give the "next page" functionality.

$("select[multiple='multiple'] option:selected").each(function(){
  $(this).removeAttr("selected");
});

Now remember, at this point - the multi-select box that is being cleared is currently "off-screen" - well it's more in the overflow section of .wizard-pages-wrapper - which is hidden.

The issue is that in Chrome 38 - if you have a multi-select box that is in a overflow hidden area and you affect it's selected items - Chrome brings that multi-select box into view. When it brings it into view, it screwed up all my margins for the wizard pages - so it kind of looked like the wizard was in between switching pages.


Solution

Albeit not elegant, I did find a solution that worked. Apparently - this behaviour of affecting selected items of a multi-select box and Chrome bringing it into view if it's in a overflow hidden area doesn't happen if the multi-select box itself is not visible (display:none).

So to fix this, this is what I changed my code to (note I'm selecting the multi-select box itself now, and not the options at the top level of my foreach loop):

$("select[multiple='multiple']").each(function(){
  $(this).hide();
  $(this).find("option:selected").(.removeAttr("selected");
  $(this).show();
});

Again, not necessarily elegant, but it worked.

Hope this helps out some peeps.