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)

56 Branch
defect

Tracking

()

People

(Reporter: jeffersoncarpenter2, Unassigned)

References

Details

Attachments

(1 file, 1 obsolete file)

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!
Component: Untriaged → DOM: Animation
Product: Firefox → Core
Attached file A minimized test case (obsolete) —
What I don't quite understand is that if '<!DOCTYPE html>' is removed, the transition works smoothly.
Status: UNCONFIRMED → NEW
Ever confirmed: true
This seems to be regressed by bug 1166500.
Blocks: 1166500
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.
Attached file More reduced test case
Attachment #8925383 - Attachment is obsolete: true
Priority: -- → P3
See Also: → 1423902
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: