Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mobile firefox not rendering body background fully, leaving white background at bottom. #75

Open
leojonathanoh opened this issue May 17, 2021 · 0 comments
Open

Mobile firefox not rendering body background fully, leaving white background at bottom. #75

leojonathanoh opened this issue May 17, 2021 · 0 comments
Assignees
@leojonathanoh
Labels
bug Something isn't working

Comments

@leojonathanoh
Copy link
Member

leojonathanoh commented May 17, 2021 •
edited
Loading

Bug

Footer component is a white background

Mobile firefox not rendering body background fully, leaving white background at bottom.

Expectation

Footer component is not a white background

Mobile firefox rendering body background fully

Discussion

This is probably due to elements in the footer having 0px in height, and margins on the footer element being used.

Also, some browsers have issues with rendering the finalmost element with a margin-bottom.

Update: This is probably a bug on mobile firefox when using background-attachment: fixed. While user scrolls on a body with background-attachment: fixed, somehow firefox renders the body element's height starting from the top of the address bar instead of the usual from the bottom of the address bar, resulting in a "suspension" of the body's background leading to the backgroundless gap at the bottom of the viewport, which at first glance appears to be related to the footer element, but not actually so.

Update: Upon further reading, when using background-attachment: fixed, every time a scroll event occurs, the browser would have to re-render the background in relation to all elements in the element styled with background-attachment: fixed. This can also lead to "flashes of unstyled background", especially so on mobile browsers where the browser is heavily optimized to suppress repeated re-rendering events.

Solution

Use min-height with background, and not background-attachment.

Wait for a fix for mobile firefox.

Do not use background-attachment, so that mobile firefox will not suffer the bug. Also, use a dedicated element the app background, which will only re-rendered on resizes (i.e. position: fixed with background).

UPDATE: #83 solves the present issue for mobile firefox, but creates Flashes of Unstyled Background (FLUB) for mobile safari.

UPDATE: #84 is not really a substitute for #83, since in #84 the background is no longer fixed (i.e. the background scrolls along with the scrolling).

Since #83 and #84 have issues, it is better to postpone fixing this issue.
@leojonathanoh leojonathanoh added the bug Something isn't working label May 17, 2021
@leojonathanoh leojonathanoh added this to the v0.66.6 milestone May 17, 2021
@leojonathanoh leojonathanoh self-assigned this May 17, 2021
@leojonathanoh leojonathanoh added wontfix This will not be worked on and removed bug Something isn't working labels May 17, 2021
@leojonathanoh leojonathanoh removed this from the v0.66.6 milestone May 17, 2021
leojonathanoh added a commit that referenced this issue May 18, 2021
@leojonathanoh
Fix (css): Use min-height: 100% on html element to ensure body backgr…
3d97f83 
…ound remains fixed

Fixes #75
@leojonathanoh leojonathanoh mentioned this issue May 18, 2021
Closed
leojonathanoh added a commit that referenced this issue May 18, 2021
@leojonathanoh
Fix (css): Use dedicated element for app background
6f54e0c 
Resolves #75

Do not use background-attachment style on body element which suffers performance issues when scrolling leading to flashes of unstyled background, especially on mobile.

Instead, use a dedicated background element which is rendered only each time the viewport changes.
@leojonathanoh leojonathanoh added bug Something isn't working and removed wontfix This will not be worked on labels May 18, 2021
@leojonathanoh leojonathanoh changed the title Footer component is a white background Mobile firefox not rendering body background fully, leaving white background at bottom. May 18, 2021
leojonathanoh added a commit that referenced this issue May 18, 2021
@leojonathanoh
Refactor: Use dedicated element for app background
9576801 
Resolves #75

Do not use background-attachment style on body element which suffers performance issues when scrolling leading to flashes of unstyled background, especially on mobile.

Instead, use a dedicated background element which is rendered only each time the viewport changes.
@leojonathanoh leojonathanoh mentioned this issue May 18, 2021
Closed
leojonathanoh added a commit that referenced this issue May 18, 2021
@leojonathanoh
Fix (css): Use min-height: 100% on html element to ensure body backgr…
f2b024d 
…ound remains fixed

Fixes #75

Background-attachment:fixed renders the background based on the viewport's width and height.

Removing background-attachment: fixed means the background is now rendered based on the body's width and height. Meaning the gradient is no longer fixed on the screen.
leojonathanoh added a commit that referenced this issue May 18, 2021
@leojonathanoh
Refactor: Use a regular background on the html element to avoid backg…
2c2b182 
…round rendering issues with having a fixed background-image

Fixes #75

Previously, background-attachment:fixed renders the background based on the viewport's width and height. The background is fixed while scrolling.

This MR removes background-attachment: fixed, and uses a regular background. The background moves while scrolling.
leojonathanoh added a commit that referenced this issue May 18, 2021
@leojonathanoh
Refactor: Use a regular background on the html element to avoid backg…
1931158 
…round rendering issues with having a fixed background-image

Fixes #75

Previously, background-attachment:fixed renders the background based on the viewport's width and height. The background is fixed while scrolling.

This MR removes background-attachment: fixed, and uses a regular background. The background moves while scrolling.

However, on mobile safari, at page init while <script> tags are still loading, if the user scrolls, the background clips at the bottom on viewport.
leojonathanoh added a commit that referenced this issue May 18, 2021
@leojonathanoh
Refactor (css): Use a non-fixed app background
f5fdc7e 
Addresses #75

Previously, background-attachment:fixed renders the background based on the viewport's width and height. The background is fixed while scrolling. However, this causes rendering issues especially on mobile browsers where there might be flashes of unstyled backgrounds at the bottom of the viewport.

This MR removes background-attachment: fixed, and uses a regular background. The background moves while scrolling.

However, on mobile safari, at page init while <script> tags are still loading, if the user scrolls, the background clips at the bottom on viewport.
@leojonathanoh leojonathanoh mentioned this issue May 18, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@leojonathanoh leojonathanoh

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
1 participant
@leojonathanoh