Closed Bug 1369794 Opened 3 years ago Closed 3 years ago

Onboarding click target extends beyond the fox icon

Categories

(Firefox :: New Tab Page, defect, P1)

defect

Tracking

()

VERIFIED FIXED
Firefox 56
Tracking Status
firefox56 --- fixed

People

(Reporter: mossop, Assigned: rexboy)

References

Details

(Whiteboard: [photon-onboarding])

Attachments

(1 file)

There is a small area at the top of the fox icon that is unclickable and a large area to the right of the icon that is clickable.
(In reply to Dave Townsend [:mossop] from comment #0)
> a large area to the right of the icon that is clickable.

The reason for this is easy to see in devtools.  The clickable element is larger than its background-image.

We have this in onboarding.css:
#onboarding-overlay-icon {
    width: 52px;
    height: 40px;
    [...]
    background: url("img/overlay-icon.svg") no-repeat;
}

...and if you hover the .svg image URL there, you can see that it is 36px by 29px (smaller than 52px by 40px).

We either need to:
 (1) reduce the width/height CSS properties on this element to match the image size (if the image is the size that we want it right now)

 (2) include "background-size:contain" in our background CSS value here like so:
> background: url("img/overlay-icon.svg") top left / contain no-repeat;

...or maybe (3) both of the above.
(:rexboy, maybe you'd be the right person to take this, given your work on bug 1357005?)
Flags: needinfo?(rexboy)
Note that "contain" & other background-size values are only allowed in 'background' shorthand if you *also* include a background-position, as noted on https://developer.mozilla.org/en-US/docs/Web/CSS/background ("The <bg-size> value may only be included immediately after <position>").  Hence the slight verbosity of "top left / contain" in my suggested CSS in comment 1.
Whiteboard: [photon-onboarding]
Should be easy to fix, taking.
Assignee: nobody → rexboy
Flags: needinfo?(rexboy)
Status: NEW → ASSIGNED
Flags: qe-verify+
Priority: -- → P1
QA Contact: jwilliams
Target Milestone: --- → Firefox 56
Per visual https://mozilla.invisionapp.com/share/2HB9YE939#/screens/
It didn't write the size clearly but the size in prototype is 36x29 by measure. So I just picked up (1).
Comment on attachment 8877579 [details]
Bug 1369794 - Fit clickable area of onboarding icon with icon size.

https://reviewboard.mozilla.org/r/149054/#review153642
Attachment #8877579 - Flags: review?(dtownsend) → review+
Pushed by ryanvm@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/1326df302d6c
Fit clickable area of onboarding icon with icon size. r=mossop
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/1326df302d6c
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Please ignore the previous comment 10


I have reproduced this bug with Nightly 55.0a1 (2017-06-02) on Windows 10 (64 bit).

This bug's fix is verified on Latest Nightly  56.0a1.

Build ID: 20170615030208
User Agent : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:56.0) Gecko/20100101 Firefox/56.0

[bugday-20170614]
I have reproduced this bug with Nightly 55.0a1 (2017-06-02) on Ubuntu 16.04, 64 bit!

The bug's fix is now verified on latest Nightly 56.0a1 (64-bit).

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

[bugday 20170614]
This issue has been verified on Win 10 x64.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.