Open
Bug 1413822
Opened 7 years ago
Updated 2 years ago
Color transition stutters whenever applied to a floating image
Categories
(Core :: DOM: Animation, defect, P3)
Tracking
()
NEW
People
(Reporter: jeffersoncarpenter2, Unassigned)
References
Details
Attachments
(1 file, 1 obsolete file)
|
188 bytes,
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20171024165158
Steps to reproduce:
I've got some code that looks roughly like this, creating a hyperlink out of an image and some text:
<div>
<a class="stutter" href="#">
<img src="https://i.imgur.com/zLg1Z2E.png" />
<p>Label</p>
</a>
</div>
Using CSS like this to effect a nice color change when the user hovers over the link:
a {
color: #c60;
transition: color 1s;
}
a:hover {
color: #d70;
}
Additionally, the image and p tag are both floating left.
Here is an example: https://codepen.io/anon/pen/BmovZE
Actual results:
Hover transition stutters significantly.
If I either remove the float style from the image, or change the selectors from "a" and "a:hover" to "a p" and "a:hover p", the transition is smooth.
Expected results:
Transition should be smooth in all cases. Tested on chromium, it's smooth there!
|
||
Updated•7 years ago
|
Component: Untriaged → DOM: Animation
Product: Firefox → Core
|
||
Comment 1•7 years ago
|
||
What I don't quite understand is that if '<!DOCTYPE html>' is removed, the transition works smoothly.
|
|
||
Updated•7 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
|
||
Comment 3•7 years ago
|
||
It seems the frame size in question is different between with/without DOCTYPE.
With <!DOCTYPE html>:
Inline(span)(0)@7f9b31dadab0 {6480,-840,0,960} vis-overflow=0,0,0,0 scr-overflow=0,840,0,0 [state=0000100000000200] [content=7f9b31db06b0] [sc=7f9b31db9158]<
Placeholder(p)(0)@7f9b31dadbf0 {0,840,0,0} [state=0000000000100000] [content=7f9b31db0740] [sc=7f9b31db9488:-moz-oof-placeholder] outOfFlowFrame=Block(p)(0)@7f9b31dadb40
Without <!DOCTYPE html> (quirk mode):
Inline(span)(0)@7f9b34cfdab0 {6480,0,0,0} [state=0000100000000200] [content=7f9b36b226b0] [sc=7f9b31db9378]<
Placeholder(p)(0)@7f9b34cfdbf0 {0,0,0,0} [state=0000000000100000] [content=7f9b36b227d0] [sc=7f9b380f6158:-moz-oof-placeholder] outOfFlowFrame=Block(p)(0)@7f9b34cfdb40
With the DOCTYPE, visual overflow is zero width and height, so nsIFrame::IsScrolledOutOfView fails.
|
|
||
Comment 4•7 years ago
|
||
Attachment #8925383 -
Attachment is obsolete: true
|
||
Updated•7 years ago
|
Priority: -- → P3
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•