Наткнулся на «интересный» баг в ФФ при изменении размеров элемента, у которого определенно свойство -moz-border-radius.
Анимационное изменение размеров сопровождается визуальными артефактами.
Кто хочет поэкспериментировать скопируйте код:
Проблему в своем случае решил добавив свойство overflow: inherit !important; элементу, к которому применяется анимация (в таком случае артефакты не проявляются). Надеюсь кому-то пригодится.
Анимационное изменение размеров сопровождается визуальными артефактами.
Кто хочет поэкспериментировать скопируйте код:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#border{
border:2px solid #474747;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
width:200px;
height:50px;
}
</style>
</head>
<body>
<div id="border"></div>
<input type="button" value="Resize" onclick="resize()"/>
<script>
var bool = 0;
function resize(){
bool = !bool;
$('#border').animate({height:bool ? 500 : 50}, 'slow');
}
</script>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.Проблему в своем случае решил добавив свойство overflow: inherit !important; элементу, к которому применяется анимация (в таком случае артефакты не проявляются). Надеюсь кому-то пригодится.
