adjust div height to avoid blur after transform

by arnolap

HTML

<div style="font-size: 0;">

<button>Unblur my div</button>

<div id="unblur" class="myclass" >
  With odd height 399px
</div>
<div class="myclass">
  With odd height 399px
</div>

</div>

CSS

button{
  color:red;font-size:24px;
}
.myclass{
  transform: translateY(50%);
 
  width: 400px;
  height: 399px;
  display: inline-block;
  font-size: 67px;
  font-weight: 800;
  backface-visibility: hidden;
  background-image: linear-gradient(-45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
  background-size: 4px 4px;
}

JavaScript

$('button' ).click(function(){ 
    $('#unblur').height( 2*Math.round( $('#unblur').height()/2 ) ) ;
	  $('#unblur').text("Fixed to even height "+ $('#unblur').height()+"px");
	});