Closed
Bug 987507
Opened 10 years ago
Closed 10 years ago
Transition of transform with outline
Categories
(Firefox :: Untriaged, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 480888
People
(Reporter: jbot, Unassigned)
Details
(Keywords: css3)
Attachments
(1 file, 1 obsolete file)
|
410 bytes,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0 (Beta/Release) Build ID: 20140314220517 Steps to reproduce: 1. Block element with outline. 2. Transition for transform. Actual results: Outline unexpectedly expands on every transition. Expansion stops only when resetting the transform and starting new transition. Expected results: Outline should just transform like the element, without expansion.
Comment on attachment 8396137 [details]
Expanding outline on every rotation by jQuery (not works).
<!DOCTYPE html>
<html>
<head>
<style>
div#block {
margin: auto;
margin-top: 200px;
width: 50px;
outline: 1px solid #000000;
transition: transform 200ms;
}
</style>
</head>
<body>
<div id="block">TEST</div>
<script>
var a = 0;
setInterval(function() {
a += 15;
document.getElementById('block').style.transform = 'rotate(' + a + 'deg)';
}, 1000);
</script>
</body>
</html>Comment on attachment 8396137 [details] Expanding outline on every rotation by jQuery (not works). ><!DOCTYPE html> ><html> ><head> ><style> > >div#block { > margin: auto; > margin-top: 200px; > width: 50px; > outline: 1px solid #000000; > transition: transform 200ms; >} > ></style> ></head> ><body> > ><div id="block">TEST</div> ><script> > >var a = 0; >setInterval(function() { > a += 15; > document.getElementById('block').style.transform = 'rotate(' + a + 'deg)'; >}, 1000); > ></script> ></body> ></html>
Comment on attachment 8396137 [details] Expanding outline on every rotation by jQuery (not works). ><!DOCTYPE html> ><html> ><head> ><style> > >div#block { > margin: auto; > margin-top: 200px; > width: 50px; > outline: 1px solid #000000; > transition: transform 200ms; >} > ></style> ></head> ><body> > ><div id="block">TEST</div> ><script src="//code.jquery.com/jquery-1.10.0.min.js"></script> ><script> > >var a = 0; >setInterval(function() { > a += 15; > $('#block').css('transform', 'rotate(' + a + 'deg)'); >}, 1000); > ></script> ></body> ></html>
Attachment #8396137 -
Attachment description: Expanding outline on every rotation by JS. → Expanding outline on every rotation by jQuery (not works).
Attachment #8396137 -
Attachment is obsolete: true
|
||
Comment 5•10 years ago
|
||
This was fixed by bug 480888
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
This bug is marked as a duplicate of bug 480888, which is resolved, but I'm still watching it on 29.0 (see attachment). I think that bug 480888 is not relevant to this.
|
|
||
Comment 7•10 years ago
|
||
(In reply to jbot from comment #6) > This bug is marked as a duplicate of bug 480888, which is resolved, but I'm > still watching it on 29.0 (see attachment). I think that bug 480888 is not > relevant to this. As stated in Bug 480888 "Target Milestone" field it's fixed for 30 and newer. "resolved fixed" always states against dev repository mozilla-central, not releases.
You need to log in
before you can comment on or make changes to this bug.
Description
•