Layout of content shifts around on http://www.fab.com

NEW
Unassigned

Status

()

7 years ago
2 years ago

People

(Reporter: dslater, Unassigned)

Tracking

unspecified
x86
Android
Points:
---

Firefox Tracking Flags

(blocking-fennec1.0 -)

Details

(Whiteboard: [Engagement] [PMM], URL)

(Reporter)

Description

7 years ago
When visiting the site fab.com using Fennec Aurora build, the page is constantly rebuilding itself each time I move around the page, zoom, etc. The page background also looks pretty different than if I visit the same page on a desktop browser or other Android mobile browsers. the background jumps around a lot, and the gray text on the screen disappears momentarily when scrolling around.
Summary: poor experience on specific website → Layout of content shifts around on http://www.fab.com
The background jumping around is because it has a CSS property of background-attachment: scroll, which means the background will move around as you scroll. It should be less jumpy, though, and that is being tracked as part of bug 607417.

As for the main issue - the page rebuilding itself as you move around the page - do you need an account to access the page you're seeing that on? When I go to fab.com I see a sign up/sign in page.
Depends on: 607417
(Reporter)

Comment 2

7 years ago
You don't need an account/have to sign in to see what I am referring too. I suspect it's the same issue as what you are referring to (background jumping).

Also note the gray text on that page when you scroll around..it also disappears for a moment and then reappears when I stop scrolling.
Whiteboard: [Engagement]

Updated

7 years ago
Whiteboard: [Engagement] → [Engagement] [PMM]
Note that even with the patches from bug #607417 applied, the background doesn't get its own fixed layer, so this bug still manifests... roc would know better why.
(In reply to Kartikaya Gupta (:kats) from comment #1)
> The background jumping around is because it has a CSS property of
> background-attachment: scroll, which means the background will move around
> as you scroll.

Actually it's background-attachment:fixed, which means it should not move around as you scroll.

On desktop we put the background into its own layer and everything works great. No idea why that wouldn't be working on mobile.
Oh, my mistake. I was looking at the background-attachment for the body, not the root element. :Cwiiis, is bug 607417 the one that makes position:fixed items work nicely with the async panning in the compositor?
(In reply to Kartikaya Gupta (:kats) from comment #5)
> Oh, my mistake. I was looking at the background-attachment for the body, not
> the root element. :Cwiiis, is bug 607417 the one that makes position:fixed
> items work nicely with the async panning in the compositor?

Right - but it doesn't work with this, for some reason.
Will need further investigation, then.
blocking-fennec1.0: --- → ?
Interesting... this has a lot of position absolute and relative on the foreground images rather than fixed.
blocking-fennec1.0: ? → -
The position fixed/absolute issues are not a high priority and could be high risk, late in the cycle, for this release.
You need to log in before you can comment on or make changes to this bug.