jquery 12.1 resizable handles bug

HTML

<!--- change script to 1.11.4 to see how it used to work --->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />

<div id="box">
  <div class="ui-resizable-handle ui-resizable-e"></div>
  <div class="ui-resizable-handle ui-resizable-w"></div>
</div>

<button id="change">Change handles</button>

CSS

#box {
  width: 100px; height: 100px;
  background: #ccc;
  position: relative;
}
.ui-resizable-handle {
  background: red;
}

JavaScript

$('#box').resizable({
	handles: { 
  	'e': 'ui-resizable-e',
    'w': 'ui-resizable-w'
  }
})

$("#change").click(function(){

	$("#box").append('<div class="ui-resizable-handle ui-resizable-s"></div>').resizable("option", "handles", {
  	'e': 'ui-resizable-e',
    'w': 'ui-resizable-w',
    's': 'ui-resizable-s'
  })
})