Firefox BUG: -moz-border-radius + $ .animate = visual artifacts
I stumbled upon an “interesting” bug in FF when changing the size of an element that has the property -moz-border-radius.
Animated resizing is accompanied by visual artifacts.
')
Who wants to experiment copy the code:
The problem in my case decided to add the property overflow: inherit! Important; the element to which the animation is applied (in this case, the artifacts do not appear). I hope someone will come in handy.
Animated resizing is accompanied by visual artifacts.
')
Who wants to experiment copy the code:
< 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 .The problem in my case decided to add the property overflow: inherit! Important; the element to which the animation is applied (in this case, the artifacts do not appear). I hope someone will come in handy.
Source: https://habr.com/ru/post/79966/
All Articles