Closed Bug 1384212 Opened 7 years ago Closed 7 years ago

mozilla logo in about:home resizes on mouse over

Categories

(Firefox :: General, defect)

defect
Not set
normal

Tracking

()

VERIFIED FIXED
Firefox 56
Tracking Status
firefox-esr52 --- unaffected
firefox54 --- wontfix
firefox55 --- wontfix
firefox56 --- verified

People

(Reporter: asa, Assigned: Gijs)

References

Details

Attachments

(1 file)

The "mozilla" logo on the top right of the about:home page resizes on mouse-over. Tested on latest nightly on windows 7 and windows 10. 

Steps to reproduce: 
1. load about:home
2. mouse over the "mozilla" logo in the top right of the page

Results: The logo gets a bit wider on mouse over

Expected results: the logo stays the same size on mouse-over.
I can't reproduce on either Windows or OS X, with today's nightly. Some questions:

- any idea about a regression window?
- are you zoomed in/out on about:home, maybe?
- same with/without Stylo enabled?
- I'm guessing you checked a clean profile?
- is this a multi-screen / multi-dpi setup?
Component: General → Untriaged
Flags: needinfo?(asa)
(In reply to :Gijs from comment #1)
> I can't reproduce on either Windows or OS X, with today's nightly. Some
> questions:

 
> - any idea about a regression window?
No, but I'll see if I can find one. 


> - are you zoomed in/out on about:home, maybe?
No zoom. 

> - same with/without Stylo enabled?
Same with and without stylo

> - I'm guessing you checked a clean profile?
Yep. Tested on several clean profiles on two machines. 

> - is this a multi-screen / multi-dpi setup?
Single screen. Tested on a 3000x2000 screen with a Windows scaling of 200% and a 1680x1050 screen at 100% windows scaling. 

Here's a video showing the size change on mouse over https://www.youtube.com/watch?v=oMP2W7tJB1Y&feature=youtu.be
Flags: needinfo?(asa)
Component: Untriaged → General
AFAICT this has been broken since landing.
So, I think this is exposing a bug in either layout or our SVG rendering. The SVG is being rendered as the ::before content of a 70x20px box, but the SVG's natural size is from a 134x38px viewbox, which doesn't scale well to that size.

I don't really see any effects when using 1.75dpi, but if I force devpixelsperpx to 1 or 2, I see the effect described in the summary - but the size change seems to happen slightly before the opacity change caused by the :hover style starts, and also outlasts that opacity styling slightly. So I think that, in particular, is a layout issue.

The issue can also be fixed (at least, on my local machine) by making the size match the svg (so set to 76x19, which is exactly half the viewbox size).

Dan, thoughts on the layout/svg weirdness here?
Flags: needinfo?(dholbert)
I can reproduce on Linux (no HiDPI or anything).

Hovering triggers an "opacity" animation, which probably causes this element to be a layer, which makes it snap to pixel boundaries (which moves its edges a bit).

Possible workaround: If you style it with "will-change: opacity", then that makes it permanently a layer and it doesn't snap/unsnap on hover anymore.
Flags: needinfo?(dholbert)
D'oh, seems the platform side of this was on file as bug 1363140.
See Also: → 1363140
Seems simple enough to just make the size match which also fixes the problem, and probably is better from a perf / blurriness perspective.
Assignee: nobody → gijskruitbosch+bugs
Status: NEW → ASSIGNED
Comment on attachment 8890533 [details]
Bug 1384212 - about:home mozilla logo shifts on hover,

https://reviewboard.mozilla.org/r/161672/#review166986
Attachment #8890533 - Flags: review?(dao+bmo) → review+
Pushed by gijskruitbosch@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/08c2389fb420
about:home mozilla logo shifts on hover, r=dao
https://hg.mozilla.org/mozilla-central/rev/08c2389fb420
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 56
Just looking at the first images in Comment 12's URL: I believe all is well, and the change shown in those screenshots is precisely what was expected here.
I have reproduced this bug with Nightly 56.0a1 (2017-07-25) (64-bit) on Windows 7, 64 Bit! 

This bug's fix is verified with latest Nightly!

Build ID   : 20170731100325
User Agent : Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
QA Whiteboard: [bugday-20170726]
I have reproduced this bug with Nightly 56.0a1 (2017-07-25) (64-bit) on Linux(64-bit)

I can verify that this bug is fixed in latest nightly

Build ID 	20170731100325
User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0

[bugday-20170726]
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.