The Firefox for iOS logo-image on the new bug page has some weird white dots at the left edge (visible with dark color-scheme)
Categories
(bugzilla.mozilla.org :: User Interface, defect)
Tracking
()
People
(Reporter: dholbert, Assigned: dkl)
Details
Attachments
(3 files)
screenshot
STR:
- Set a preference for dark color-scheme (search for "Dark" in Firefox Preferences and click the radio-button for "Website Appearance:Dark")
- Visit https://bugzilla.mozilla.org/enter_bug.cgi
- Look at the image for "Firefox for iOS", particularly the left edge
ACTUAL RESULTS:
The upper-left edge of the phone has three small bright-white "bumps" (visible between the black phone-edge and the black page-background). Looking more closely at the image, I think maybe they're supposed to be volume/power buttons? But in this context they just look like graphical artifacts (or pixels that are white instead of transparent).
(There's also a similar white bump at the right edge of the top of the phone, but that one's less noticeable.)
EXPECTED RESULTS:
No such white pixels that look kinda like graphical artifacts.
Screenshot attached.
The image in question is https://bugzilla.mozilla.org/extensions/BMO/web/producticons/firefox_ios.png
Here's a reduced testcase with that^ image shown in a much-larger version over a white background, so you can see the white bumps more clearly:
data:text/html,<body style="background:black"><img height="800px" src="https://bugzilla.mozilla.org/extensions/BMO/web/producticons/firefox_ios.png">
|
Assignee | |
Comment 1•2 years ago
|
||
I agree that I think they are originally the buttons on the older iphones and there on purpose. We should instead look for a more updated icon for a recent iPhone. It would need the Firefox logo on it of course. Who would I ask for that?
|
Reporter | |
Comment 2•2 years ago
|
||
Thanks -- yeah, I'm not entirely sure who the relevant folks are to ask. I asked in #mobile on slack as a starting point to give some iOS folks a heads-up about the issue, but I'm not sure who among them would be the right person to ask.
(While we're at it, I guess it'd also be useful getting a refreshed Fenix [Firefox for Android] image there, since the current one (shown at top left of my screenshot) has an old-style Firefox logo on it (pre-2017 branding refresh).
|
|
Reporter | |
Comment 3•2 years ago
|
||
Poking around the org, it looks like maybe this might be in cwong's neighborhood -- cwong, do you know if we have any more-up-to-date icons that'd be reasonable to use to represent Firefox-on-iOS and Firefox-on-Android, on the bug-entry form, or do you know who might be a good person to ask about that?
(This might be a case where we don't have a suitable image and just need to mock up something; probably doesn't have to be amazing but just something better than what we've got now; see screenshot in comment 0 for the status quo. Hoping you might know who'd be a good person to do that - thanks!)
Hi there, I can look around for some newer iOS and Android device mockups and update the image/logo inside. Do you have the link to the Android png? And should the updated images be the same size as the current ones? Thanks!
|
|
Reporter | |
Comment 5•2 years ago
|
||
Thanks! The current (stale) android PNG is https://bugzilla.mozilla.org/extensions/BMO/web/producticons/firefox_android.png
RE size: probably 128x128 is best (matching the Firefox icon and Thunderbird icon on the new-bug page), though it doesn't matter too much, as long as they're square.
The new-bug page just embeds these like so:
<img height="64" width="64" alt="" src="...">
So they're displayed as 64x64 CSS pixels (but doubling that is nice for crispness, since 64x64 CSS pixels is really 128x128 device pixels on a 200%-HiDPI screen, etc.)
Also, ideally they should look nice when viewed over a background-color of rgb(30, 31, 32) as well as rgb(235, 236, 237) (those are the two background-colors that Bugzilla uses, depending on dark vs. light color-scheme preference), since that's the thing that prompted me to file this in the first place -- the current iOS image looking odd (buttons-that-look-like-white-artifacts) when viewed over the dark bugzilla background.
Thanks again!
Amazing, thanks for the all info! I'll look into this in the next few days and provide some updated images soon.
Hi, I experimented with a few variations of the images, you can see them what they look like here:
https://www.figma.com/file/6JstmeskBZGfmvpcsG8yFM/Bugzilla-Mobile-Images?type=design&node-id=1%3A33&mode=design&t=SHoxPLbUM4lcbNn9-1
- I did one option where the logo is enlarged and a second option where the logo is displayed in full-view
- For iOS
-- A & C are using vector phone images which doesn't have that weird white outline in dark mode, however in dark mode it does blend with the background a bit
-- C & D are using real phone images, but due to the photography of the phone, it has a glare that is visible in dark mode
I'll attach the images in a zip above as well. Let me know what you think of them, thanks!
|
|
Reporter | |
Comment 9•2 years ago
|
||
They look great to me! Maybe dkl can take it from here, if they look good to him too?
|
|
Assignee | |
Comment 10•2 years ago
|
||
Looks good. I will get these rolled out today.
|
||
Comment 11•2 years ago
|
||
|
|
Assignee | |
Comment 12•2 years ago
|
||
Description
•