Giters

gurusabarish / hugo-profile

A highly customizable and mobile first Hugo template for personal portfolio and blog.

Home Page:https://hugo-profile.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dark mode shows a white footer on the pages that is too short from the browser window

zavocc opened this issue · comments

commented

Describe the bug
When dark mode is set, there are instances where a white footer will show when the page content is too short to fit into the browser window size or in portrait orientation

Happens to both Chromium and Firefox.

To Reproduce
Steps to reproduce the behavior:

  • Toggle dark mode

Simply zooming out of this page should be enough to reproduce this behavior once the page is beyond scrollable - https://hugo-profile.netlify.app/blogs/, and zooming in that would fit into the browser window size doesn't show the white footer regardless if I scrolled down at the bottom of the page

Or create a blog that is empty or doesn't have much content and present it on maximized or larger browser window size to maximum beyond the length of the page content, such as:

---
title: "Welcome to My First Post"
date: 2024-04-05T17:30:01+08:00
draft: false
author: geraldo
tags: ["blogs", "misc"]
#image:
description: My first blog for this site!
toc: false
socialShare: false
---
## Hello world!
This is my first blog written using [Hugo](https://gohugo.io) with [hugo-profile theme](https://themes.gohugo.io/themes/hugo-profile/)

Then display this page in portrait orientation or maximized with 100% zoom

Expected behavior
Regardless, it should not show a white footer of a page when it is set to dark mode when the length of the page is too short.

Screenshots
image
image

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Firefox, Microsoft Edge
  • Version: [Firefox: 124.0.2, Edge: 123.0.2420.97]

Smartphone (please complete the following information):

  • Device: OPPO A5 2020
  • OS: Android 11
  • Browser: Firefox
  • Version: (same as desktop)

Additional context
NA

commented

I had the same issue, however, when I opened the inspect toll in Chrome and looked at the HTML, I noticed it was due to an extension I had that created that white block of HTML (the extension was Zotero used for academic research). Deleting the node in the tree for the extension removed the white block. When I uninstalled the extension completely, the white block disappeared.

Don't know if there's something in the code that causes this, but that fixed it for me