If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

app splash screen transparency is not opaque enough

NEW
Assigned to

Status

Firefox OS
Gaia::System
3 years ago
3 years ago

People

(Reporter: dietrich, Assigned: helene.tindon, Mentored, NeedInfo)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [lang=js])

Attachments

(3 attachments)

(Reporter)

Description

3 years ago
Created attachment 8462688 [details]
screenshot

Flame, nightly channel, July 25

For example, swipe edge to move from any app to say Calendar. You'll see the splash screen.

The splash screen is the Calendar icon in the center, with the Calendar app (or a screenshot of it) behind a semi-transparent layer (or something like that - forgive any assumptions of implementation, I haven't looked yet).

That layer is too transparent - showing too much of the Calendar app screenshot, making it look a bit buggy/messy at first glance.

I think that making the layer more opaque would deliver the intended effect better.

Another approach could be to put a large flat white circle background behind the icon (kind of like a large border).

Screenshot attached.
(Reporter)

Updated

3 years ago
Flags: needinfo?(firefoxos-ux-bugzilla)

Comment 1

3 years ago
Flagging Patryk to triage out and assign to our team for 2.1 from here.
Flags: needinfo?(firefoxos-ux-bugzilla) → needinfo?(padamczyk)
Hey Eric, can you look into this. I believe the app launch splash screen should be the same (or VERY similar) to the swipe splash screen. Now they are completely different and yes like Dietrich states, way too transparent in the swipe version. If you need help ask Hung.
Flags: needinfo?(padamczyk) → needinfo?(epang)
Hey Hung, can you look into this bug?

I think it looks odd because there's no drop shadow behind the icon.  The icons also looks very jagged around the edges, so it doesn't seem to be resizing very well..

I'll reach out to Rob and Francis about the splash screen, we talked about it in Berlin but I don't know if a bug was opened for it.

Thanks!
Flags: needinfo?(epang) → needinfo?(hnguyen)
(In reply to Eric Pang [:epang] from comment #3)
> Hey Hung, can you look into this bug?
> 
> I think it looks odd because there's no drop shadow behind the icon.  The
> icons also looks very jagged around the edges, so it doesn't seem to be
> resizing very well..
> 
> I'll reach out to Rob and Francis about the splash screen, we talked about
> it in Berlin but I don't know if a bug was opened for it.
> 
> Thanks!

just spoke with Rob, he's going to open a bug for the splash screen tomorrow morning :)

Comment 5

3 years ago
Created attachment 8464890 [details]
Design_Update.png

Attaching update. Increasing the opacity of the white overlay from 80% to 95% should solve this issue. 

I'm also concerned over the jaggedness of the icons but we can open a separate bug for it. 

Thanks
Flags: needinfo?(hnguyen)
(Reporter)

Updated

3 years ago
Mentor: dietrich@mozilla.com
(Reporter)

Updated

3 years ago
Whiteboard: [lang=js]
(Reporter)

Updated

3 years ago
Assignee: nobody → helene.tindon
(Assignee)

Comment 6

3 years ago
Created attachment 8515487 [details] [review]
patch
Attachment #8515487 - Flags: review?(etienne)
(Assignee)

Comment 7

3 years ago
We removed the opacity property of .appWindow > .fade-overlay because it didn't seem to serve a purpose that we could detect.
Comment on attachment 8515487 [details] [review]
patch

Made some comments on github, can you amend your commit with the changes and flag me for review again? Thanks!
Attachment #8515487 - Flags: review?(etienne)
Comment on attachment 8515487 [details] [review]
patch

All good! Can you squash both commits into one? Then your patch will be ready to land!

PS: when you update a pull request you can set the review? flag again, it will ping the reviewer :)
Flags: needinfo?(helene.tindon)
Attachment #8515487 - Flags: review+
You need to log in before you can comment on or make changes to this bug.