1885661 - Sharp Cut-off in Translations Language Dropdown Shadow

Status: NEW

(Firefox for Android :: Translations, defect, P3)

Description

[Olivia Hall [:olivia]]

More details in the Figma.

Comment 1

[Iorga Gabriel]

https://www.figma.com/file/GT6oZLFw32LiCwKl5GOMWD?type=design&node-id=10980-58755&mode=design#766503058

Comment 2

[Iorga Gabriel]

I think this is not a bug.

Comment 3

[Olivia Hall [:olivia]]

Consider looking for obstructions on the shadow, none were spotted in the initial investigation, or else using the .shadow modifier to attempt to figure out more around here or smooth it out manually.

Comment 4

[Olivia Hall [:olivia]]

Didn't have any luck with .shadow. However, removing offset here fixes the issue, but it causes the dialog to hover over the line. Will try and see if there is a way to have both the correct offset and shadow.

Comment 5

[Olivia Hall [:olivia]]

Changing offset didn't fix it as much as I hoped and .shadow seems to modify the enter dialog and not the menu itself. Seems related to this discussion about problems customizing DropdownMenu. When I try to modify the shadow on DropdownMenu it is the inner shadow of the component and not the outer shadow.

Additionally, moving the offset still has the sharp line, it only looked fixed because I was testing on a Pixel. Nothing appears to be cutting the shadow off early on the Translations version of this bug.

Mentioning, this bug is much more prominent on a Samsung device and it looks like the regular menu is impacted as well.

Comment 6

[Olivia Hall [:olivia]]

Attachment: Shadow on Browser Menu

Comment 7

[Olivia Hall [:olivia]]

Attachment: Translations Language Dropdown Shadow

Comment 8

[Olivia Hall [:olivia]]

Attachment: Menu Shadow on Top Nav Bar doesn't have as sharp of a cut-off, but padding looks similar.

Comment 9

[Olivia Hall [:olivia]]

Attachment: ShadowModifierOnDropdownMenu.png

Example using .shadow on DropdownMenu. Looking at DropdownMenu's implementation, it looks like modifier applies to DropdownMenuContext and no modifier for Popup.

Comment 10

[Olivia Hall [:olivia]]

I'm needing to end this timeboxed attempt. My best lead after the attempt is waiting for the compose bug to change and allow us more customization. Otherwise, I wonder if there is some ideal configuration with the offset values.

Comment 11

[Nicholas Poon (redirect NI to [e-mail]) [:Nick]]

I did a quick google search on this and it seems that Google added the ability to change the elevation for their built in DropdownMenu, which is used for the Translations Language Dropdown. However, the change is made for Material 3, whereas we are currently using Material 2 in fenix. Thus, I have added migrating to Material3 as a blocker for this bug