Simple select tag with options not working on Chrome

Question

I ran to this problem where I am unable to expand this simple select tag on my chrome.

<select id="filterCategory" class="">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Steps to reproduce:

1. Run code snippet above (on Chrome),
2. Go for Developers Mode (F12),
3. Toggle mobile device mode (By default is Ctrl + Shift + M)

I am currently using Chrome Version 53.0.2785.116 (64-bit) on Ubuntu

This works fine in any other browser or mobile native browsers, it's just for Chrome.

Question: Any temporary workaround for this?

Edit: This behavior is worsen if I use position fixed as its container and form-control class from bootstrap. The option is out of the chrome window with invisible options.

Answer 1

You don't have to worry about mobile-device, the select-menu will look something like this,

and for debugging you can use down and up arrow key to select menu options until chrome fix this issue.

Answer 2

crude long winded workaround, but on the upside allows you to style customised menus:

$('select').each(function() {
  // set up the list
  var $this = $(this),
    $class = $this.attr('class') + ' sel',
    $id = $this.attr('id'),
    list = '',
    opts = '',
    start = '';
  $this.hide();
  $('option', this).each(function(i) {
    var content = $(this).text();
    if (i === 0) {
      start = '<div  >' + content + '</div>';
    }
    opts += '<li data-id="' + $id + '">' + content + '</li>';
  });
  list = '<ul  >' + opts + '</ul>';
  $this.after('<div class="' + $class + '" >' + start + list + '</div>');
});

// adds the clicks
$('.sel').on('click', function(e) {
  $('ul', this).fadeIn('fast');
  $('ul', this).on('mouseleave', function() {
    $(this).fadeOut('slow');
  });
});

// registers the input to the original selector
$('.sel ul li').on('click', function(e) {
  e.preventDefault();
  $('.sel ul').fadeOut('fast');
  var $this = $(this),
    target = $this.data('id'),
    num = $this.text();
  $('select#' + target).val(num).change(); // triggers the hidden selector
  $this.parent().siblings().text($this.text());
  return false;
});



// test only
$('select').on('change', function() {
  $("#monitor").text(this.value); // or $(this).val()
});

.sel {
  width: 3em;
  background: #fff;
  cursor: pointer;
  text-align: center;
  border: 1px solid #09f;
}

.sel ul {
  display: none;
  position: relative;
  left: 0em;
  top: -1em;
  width: 3em;
  margin: 0em;
  padding: 0em;
  cursor: pointer;
  background: #fff;
  text-align: center;
  list-style-type: none;
}

.sel ul li:hover {
  background: #bbb;
}

#monitor {
  position: fixed;
  left: 3em;
  width: 3em;
  height: 1em;
  bottom: 4em;
  background: #09f;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select id="filterCategory" class="">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>


<div id='monitor'>test</div>