Open Bug 1710764 Opened 5 months ago Updated 1 month ago

CSS transform function rotateX() scales instead of rotating on hover when CSS property transition is set

Categories

(Core :: Graphics: WebRender, defect)

Firefox 90
defect

Tracking

()

People

(Reporter: anselmschueler, Unassigned, NeedInfo)

References

(Regression)

Details

(Keywords: regression)

Attachments

(5 files, 3 obsolete files)

Attached video 2021-05-12_02-30-36.mkv

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0

Steps to reproduce:

→ Write an HTML file containing an image to be transformed
→ Write a style for that image to be transformed with rotateX when hovered
→ Write a nonzero transition property into the style of the image

For instance:

<style>
    img {
        transition: 511ms;
    }

    img:hover {
        transform: rotateX(27deg);
    }
</style>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">

Actual results:

While or after hovering, the image sometimes switched to merely being scaled down by an amount such that the height of the displayed image matched the intended height after the rotation

Expected results:

The image should’ve been rotated along the X axis and displayed squashed or in perspective.

Attached video Alternate demonstration

Note: This does not occur when an additional perspective() transformation is applied after the rotateX().

Summary: rotateX scales instead of rotating on hover when transition is set → `rotateX()` scales instead of rotating on hover when `transition` is set
Component: Untriaged → CSS Transitions and Animations
Product: Firefox → Core

Firefox 68 worked fine. Regression range: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=598d441e4ebaa93ab098d266035a396057c82129&tochange=6cbf1430a66ef5aa5f066ed77677f47ea44fc0e1. I don't see any immediately-suspicious changes there though. Maybe bug 1581113?

Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(hikezoe.birchill)
Attached file Improved demonstration HTML (obsolete) —

This is a slightly more pleasant demonstration page.

I can’t reproduce this problem in Firefox 88.

Attached file Further improved demonstration page (obsolete) —

This page also demonstrates the effect that perspective has on the effect.

Attachment #9221604 - Attachment is obsolete: true

Thanks Alice! <3

Component: CSS Transitions and Animations → Graphics: WebRender
Flags: needinfo?(hikezoe.birchill) → needinfo?(aosmond)

I do not know if this is still relevant, but I can reproduce this on FF 88.0.1 on Windows, but not on Linux.

Attached file Reverted demo (obsolete) —

Actually, that one didn’t actually work. Reverting back to this version.

Sorry.

Attachment #9221609 - Attachment is obsolete: true

Sorry that I’m spending so much effort on this demo page. That was a defective version just now.

Attachment #9221908 - Attachment is obsolete: true
Severity: -- → S3
Blocks: gfx-triage
Flags: needinfo?(dmalyshau)
No longer blocks: gfx-triage
Summary: `rotateX()` scales instead of rotating on hover when `transition` is set → CSS transform function rotateX() scales instead of rotating on hover when CSS property transition is set
See Also: → 1723427
You need to log in before you can comment on or make changes to this bug.