Closed Bug 1384212 Opened 4 years ago Closed 4 years ago
mozilla logo in about:home resizes on mouse over
59 bytes, text/x-review-board-request
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
(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
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?
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.
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 email@example.com: https://hg.mozilla.org/integration/autoland/rev/08c2389fb420 about:home mozilla logo shifts on hover, r=dao
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]
You need to log in before you can comment on or make changes to this bug.