Dawn Theme - Bar Appears on Bottom While Scrolling on Mobile

[PenfoldShush]

Steps to Reproduce:

1. Visit https://sothriftication.com on a mobile device.

2. Scroll down slowly, keeping finger pressed to the device screen and notice a semi-transparent bar creeps up from the bottom (notice it by the words “LOVE” COLLECTION on the screens below).

Additional Notes:

This bar will be white if browser is in regular mode and black if in dark mode (at least on Chrome and Opera respectively). The bar disappears once the finger is depressed from the screen but it can be revealed by scrolling again. It doesn’t matter what part of the webpage you are on and it happens on all pages.

It behaves like a sticky bottom navigation bar that is broken. I have checked Theme Settings to see if there’s an element I can turn the opacity to 0% but can’t find anything. I have also temporarily disabled the few apps I have installed to rule them out, to no avail.

This bar seems to be on a layer behind my images as it appears to go behind them when scrolling.

It also appears to be related to the light blue > transparent color scheme I am using, as it does not happen when I switch to a color scheme with one solid color (see Color Scheme settings on above right screen).

Platform Specific? - I reproduced this on my Google Pixel 6 Pro device, however, I am UNABLE to repro on an iPhone 10 Pro.

Crackpot Theory:

I think that by using a color scheme that involves a gradient from solid color to 100% transparency, I have inadvertently revealed a broken element perhaps related to a sticky bottom navigation bar.

[BSS-Commerce]

Hi @PenfoldShush ,

You can read the same problem in this article: https://css-tricks.com/the-fixed-background-attachment-hack/

To sum up, this problem just appeared only on mobile, because of property “background-attachment: fixed” in CSS, at best, does not work well in mobile browsers. This means it’s not the theme’s error, it is a compatible problem with browsers on mobile devices.

The article said to solve this problem, you replace that property by create some element with position: fixed.

But you can try to comment the code of property “background-attachment: fixed” to disable it like I did

1. Go to Themes ->Edit code, find file name “base.css”, find CSS of class gradient by Ctrl+F, and enter “.gradient” to find it until you see this code

2. Then, comment the background-attachment: fixed by select this code and Ctrl + /, then add “background-repeat: no-repeat”

/* background-attachment: fixed; */
  background-repeat: no-repeat;

Hope it helps, if it still doesn’t work, and you think it’s not a big problem, just drop it, but if you have to fix it, I can help you with the solution mentioned in the article.