Hello Giggles toolbar shadow is not anchored when scrolling to be shown




Firefox for Android
2 years ago
2 years ago


(Reporter: jonalmeida, Unassigned)


44 Branch

Firefox Tracking Flags

(Not tracked)




(1 attachment)



2 years ago
Created attachment 8681725 [details]

1. Visit any website (preferably one with a white background so it's easy to notice)
2. (Slowly) scroll downward so that the toolbar starts moving off the screen. Do not lift your finger off the screen.
3. Observe that the shadow from the toolbar that shows on the webpage doesn't move while you scroll (see screenshot)

- The shadow should be anchored to the bottom of the toolbar so it moves up along with it.

- It doesn't move at all until you lift your finger off the screen.

Comment 1

2 years ago
Device: Nexus 5
Fennec Version: Nightly (2015-11-01)
tracking-fennec: --- → ?
We don't have a shadow for our toolbar – this looks specific to the floating header on hellogiggles.com.

Worth noting that we've had similar problems with the floating headers in the past.
Summary: Toolbar shadow is not anchored when scrolling to be hidden → Hello Giggles toolbar shadow is not anchored when scrolling to be shown
I suspect that this rule 'background-color: rgba(255, 255, 255, 0.98)' on the header possibly in combination with 'transition: all 0.2s ease-out;' is causing the issue. We may not update the style data until the finger lifts.
Kats - I thought we had other bugs with the same STR. Probably a dupe?
Supplying the NI for comment 4.
Flags: needinfo?(bugmail.mozilla)
Bug 1214267 is the only other one that I'm aware of but I'm not sure if it's the same underlying issue. I'll need to look at how the shadow on hellogiggles is being positioned. On PTO today but I'll look into it when I get to 1214267.
Component: Theme and Visual Design → Graphics, Panning and Zooming
See Also: → bug 1214267
Flags: needinfo?(bugmail.mozilla)
Mike it looks like this website is maybe just doing something wrong, can you look into it?
Flags: needinfo?(miket)
I don't see anything fishy in the CSS -- they have a position: fixed <div id=sticky-menu class=shadow> element.

It seems like this only happens at the moment when you scroll the viewport down and our URL bar animates up out of view -- the shadow from the #sticky-menu is exactly where the URL bar used to be. Once you let go of your finger the shadow div figures out the top of the viewport is actually up a bit and hops back up.

(then again, their whole sticky menu appears to be busted or disabled, because it doesn't follow the viewport at all in Chrome or Fennec. or maybe you have to do something fancy to see it)
Flags: needinfo?(miket)

Comment 9

2 years ago
FWIW, I don't see this issue in Nightly anymore. Although, it still exists in beta.

Comment 10

2 years ago
s/anymore/at the moment/
Actually, I don't see it either after updating from yesterday's build. Probably fixed by Bug 1214267 -- let's close it as a dupe of that.
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1214267
tracking-fennec: ? → ---
You need to log in before you can comment on or make changes to this bug.