Closed
Bug 987507
Opened 11 years ago
Closed 11 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•11 years ago
|
||
This was fixed by bug 480888
Status: UNCONFIRMED → RESOLVED
Closed: 11 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•11 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
•