我使用jQuery动画弹出菜单。在Chrome中,缩放比例为90%和110%会阻止动画运行,并且菜单不会显示。用户没有其他理由可以缩放到该级别。
我尝试了rem em和px都无济于事。所有其他缩放级别都可以正常工作。
代码:
// Help ============================================================================
$("body").on("click", "#btn-help", function(){
var el= '#myhelp';
if($(el).width()!==0){
$(el).animate({width: '0rem', height: '0rem', opacity: '0' }, 300);
$("#fa1").attr('class', 'fa fa-question');
}else{
$(el).animate({width: '30rem', height: '40rem', opacity: '1' }, 300);
$("#fa1").attr('class', 'fa fa-times');
}
});
CSS:
/* Help Box =======================================================*/
.help{
position: fixed;
z-index: 30;
top: 6rem;
left: 3.0rem;
height: 0rem;
width: 0rem;
border-style: solid;
border-color: #ffc107;;
border-radius: 1.0rem;
overflow: hidden;
}
HTML:
<button id="btn-help" class="btn btn-circle btn-warning btn-help" title="Help for this page" ><i id="fa1" class="fa fa-question"></i></button>
<div id="myhelp" class="help" style="display:inherit">
<div class="helpbody">
<p>this is the help text</p>
</div>
</div>
希望有人可以提出解决方案。
欢呼
布里