Note: There are a few cases of duplicates in user autocompletion which are being worked on.

stylo: Yelp's thumbnail images shake and rotate when mousing over then instead of

RESOLVED FIXED

Status

()

Core
CSS Parsing and Computation
P1
normal
RESOLVED FIXED
7 days ago
10 hours ago

People

(Reporter: cpeterson, Assigned: jeremychen)

Tracking

(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(URL)

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(2 attachments)

(Reporter)

Description

7 days ago
STR:
1. Load a Yelp page, such as https://www.yelp.com/biz/golden-gate-bridge-san-francisco
2. Mouse over the photo gallery's thumbnail images.

EXPECTED RESULT:
When Stylo is not enabled, the thumbnail images grow larger.

ACTUAL RESULT:
When Stylo is enabled, the thumbnail images shake and rotate.
(Assignee)

Comment 1

6 days ago
Inspector shows that the shake and rotate comes from these 3 elements:
  <div class="js-photo photo photo-1" data-ga-label="left_photo" data-media-id="FhUCjr71X_XB9sGQc-xEcA" data-media-index="1">
  <div class="js-photo photo photo-2" data-ga-label="middle_photo" data-media-id="PbumJneeHsIs1FImU6yQzg" data-media-index="0">
  <div class="js-photo photo photo-3 photo-grid" data-ga-label="right_photo" data-media-id="en99IZJdTCA-BsbHzyHoAA" data-media-index="2">

... all these 3 have following styles applied:
==========
.photo {
  z-index:1000;
  display:block;
  position:absolute;
  margin:-15px;
  width:250px;
  height:250px;
  -webkit-box-shadow:none;
  box-shadow:none;
  -webkit-transition:all 0.2s ease-out;
  transition:all 0.2s ease-out;
  -webkit-transition-property:-webkit-transform, box-shadow;
  transition-property:transform, box-shadow;
  -webkit-transform:scale(.88);
  -moz-transform:scale(.88);
  -ms-transform:scale(.88);
  transform:scale(.88);
  -webkit-transform:scale(.88) translateZ(0);
  -moz-transform:scale(.88) translateZ(0);
  -ms-transform:scale(.88) translateZ(0);
  transform:scale(.88) translateZ(0)
}
[...]
.photo:hover {
  z-index:1001;
  -webkit-box-shadow:0 0 25px -3px rgba(0,0,0,0.5);
  box-shadow:0 0 25px -3px rgba(0,0,0,0.5);
  -webkit-transform:none;
  -moz-transform:none;
  -ms-transform:none;
  transform:none;
  -webkit-transform:translateZ(1px);
  -moz-transform:translateZ(1px);
  -ms-transform:translateZ(1px);
  transform:translateZ(1px)
}
==========

I try to remove the setting of "transform:translateZ(1px)" to make the transition only from scale(0.88) to scale(1), then the issue is gone. So, I suspect the shake and rotate effect comes from a transition effect from translateZ(0) to translateZ(1px).
(Assignee)

Comment 2

6 days ago
Created attachment 8886793 [details]
reduced testcase

STR:
1. Try to move mouse near the boundary of the blue rectangle
2. Move mouse over the blue rectangle
3. Move mouse out of the blue rectangle
4. Repeat 2 & 3 back and forth, then an unexpected rotate is shown

It seems that a z-index change is also essential to reproduce the issue.
Assignee: nobody → jeremychen
(Assignee)

Comment 3

6 days ago
(In reply to Jeremy Chen [:jeremychen] UTC+8 from comment #2)
> 
> It seems that a z-index change is also essential to reproduce the issue.

No, it is NOT essential to set z-index.
Extend the transition duration to 2s to make it even more obvious, the issue still remains even if the z-index setting is removed.
(Assignee)

Comment 4

2 days ago
Ok, I know what's going on here.

We read the transform into matrices correctly for both gecko and stylo, until we get to [1]. In stylo, we delegate matrix decomposition/interpolation/recomposition to Servo. And in decompose_3d_matrix function [2], we accidentally use the wrong value to normalize the 2nd row of the decomposed matrix, which then would cause the unexpected interpolation result in this bug. I have a working patch that can fix this issue on my local machine.


[1] https://searchfox.org/mozilla-central/rev/a83a4b68974aecaaacdf25145420e0fe97b7aa22/layout/style/nsStyleTransformMatrix.cpp#517-525
[2] https://searchfox.org/mozilla-central/source/servo/components/style/properties/helpers/animated_properties.mako.rs#2113
Comment hidden (mozreview-request)
(Assignee)

Updated

2 days ago
Attachment #8887857 - Flags: review?(hikezoe)

Comment 6

2 days ago
mozreview-review
Comment on attachment 8887857 [details]
Bug 1381196 - stylo: fix Y scale computation while decomposing a 3D matrix.

https://reviewboard.mozilla.org/r/158778/#review164064

Good catch! We might need length method for Matrix's row in future somehow.

Anyway this needs an automation test.
Attachment #8887857 - Flags: review?(hikezoe) → review+
(Assignee)

Updated

2 days ago
Blocks: 1382517
(Assignee)

Comment 7

2 days ago
(In reply to Hiroyuki Ikezoe (:hiro) from comment #6)
> 
> Anyway this needs an automation test.
>

Per discussion w/ Hiroyuki on IRC, it might be better to land the fix sooner, so we can provide better experience for stylo nightly users. Filed Bug 1382517 as a followup to add the tests.

servo PR: https://github.com/servo/servo/pull/17789
(Assignee)

Comment 8

2 days ago
PR merged to autoland: https://hg.mozilla.org/integration/autoland/rev/eb19a789a455
(Assignee)

Comment 9

10 hours ago
merge to m-c: https://hg.mozilla.org/mozilla-central/rev/eb19a789a455
Status: NEW → RESOLVED
Last Resolved: 10 hours ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.