1369794 - Onboarding click target extends beyond the fox icon

Status: VERIFIED FIXED

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

Description

[Dave Townsend [:mossop]]

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.

Comment 1

[Daniel Holbert [:dholbert]]

(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.

Comment 2

[Daniel Holbert [:dholbert]]

(:rexboy, maybe you'd be the right person to take this, given your work on bug 1357005?)

Comment 3

[Daniel Holbert [:dholbert]]

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.

Comment 4

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Should be easy to fix, taking.

Comment 5

[KM Lee [:rexboy] (inactivate after Sep. 22)]

Attachment: Bug 1369794 - Fit clickable area of onboarding icon with icon size.

Review commit: https://reviewboard.mozilla.org/r/149054/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/149054/

Comment 6

[KM Lee [:rexboy] (inactivate after Sep. 22)]

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 7

[Dave Townsend [:mossop]]

Comment on attachment 8877579 [details]
Bug 1369794 - Fit clickable area of onboarding icon with icon size.

https://reviewboard.mozilla.org/r/149054/#review153642

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1326df302d6c
Fit clickable area of onboarding icon with icon size. r=mossop

Comment 9

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/mozilla-central/rev/1326df302d6c

Comment 10

[Rezwana islam ria]

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 : 20170602030204
User Agent : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0

[bugday-20170614]

Comment 11

[Rezwana islam ria]

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]

Comment 12

[Farhadur Reja Fahim]

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]

Comment 13

[Justin [:JW_SoftvisionQA]]

This issue has been verified on Win 10 x64.