Weird Android CSS problem: mysterious white overlay appearing in all browsers, both zoomable and touch-sensitive

After testing my website in various browsers, I discovered that while it looks fine on most platforms, there is a persistent issue on Android devices.

The problem occurs when the user scrolls down around 30% of the page - a white overlay appears and extends to the end of the content. This glitch is consistent across different Android browsers such as Chrome and the stock browser app, as confirmed through BrowserStack.

You can view the website here.

I have attached screenshots displaying the bug: screenshot 1, screenshot 2.

To further demonstrate the issue, I created a video showcasing the bug: https://youtu.be/UbXp7o-v64Y.

Despite attempting various troubleshooting steps like removing overflow-x, adjusting z-index values, disabling scripts, and commenting out sections in the HTML code, the problem persists. I suspect the root cause lies in the style.css file, as removing the stylesheet eliminates the bug.

Unfortunately, I lack access to debugging tools on Android devices. Any suggestions on how to pinpoint and address this issue would be greatly appreciated.

androidhtmlcssweb

Answer №1

Guess what I discovered! It's absolutely mind-boggling.

So, here's the kicker - I had this snippet of code: 

html, body { -webkit-filter: saturate(1.15); filter: saturate(1.15); }
. And get this, once I removed it, everything fell back into place!

Isn't it just pure magic? The way things unfold, I can't wrap my head around it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing flexbox, absolute positioning, and 100% height in web design

While experimenting with a flexbox inside an absolute box within a div of defined height, I encountered a problem. Let me explain the issue step by step. Here is a link to a fiddle demonstrating the problem: https://jsfiddle.net/8ub9tyub/ When hovering o ...

htmlcssflexbox

How to Make a Div Element Expand to Fill Unknown Space?

I have a box with the word "Test" inside it. I need to adjust its width to be 100% of its containing div, but I'm unsure about how to do this without using Javascript. The example in the jsFiddle linked below demonstrates what I am trying to achieve. ...

htmlcss

Can I get the audio download for ReCaptcha?

I'm seeking guidance on what I might be doing incorrectly Referring to the code provided in: How to interact with the reCAPTCHA audio element using Selenium and Python My goal is to obtain the src file for the audio to download it. To achieve this, ...

pythonhtmlpython-3.xselenium

How can I utilize jQuery to add tags in a box?

I have an idea for a feature similar to the Stack Overflow tag insert. My goal is to have a box where I can type in a tag, click 'Add', and see it appear above. Additionally, I want this action to update an array called 'SelectedTags'. ...

javascriptjqueryhtmltags

What is the reason behind the functionality of invalid HTML?

As someone diving into the world of web programming, I have a burning question: Why does invalid HTML seem to work just fine sometimes? And why is it that HTML validation isn't always necessary? <html> <body> </html> It's intr ...

html

Ways to Customize the Text Color in the Navigation Bar

Is there a way to change the color of text in my navigation bar to #b3b3b3? It seems like I am limited to the colors provided by bootstrap. How can I work around this limitation? <nav class="navbar" style="color: #b3b3b3; background-col ...

htmlcssbootstrap-5

Delete a designated section from a URL with the power of jQuery

I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...

javascriptjqueryhtml

Having trouble inserting a new list item within a Bootstrap tab

I have a question regarding the creation of a tabbed interface using the code below: <ul class="nav nav-tabs"> <li class="active"><a href="#">Chart 1</a></li> <li><a href="#">Chart 2</a></ ...

htmlcsstwitter-bootstrap

Creating an If statement tailored for a particular image source: a step-by-step guide

In the program I am running in Dreamweaver, there is a specific line of code that looks like this: function go() { if((document.test.test1.src == document.test.test2.src && document.test.test2.src == document.test.test3.src )) ...... ...... ..... ...

javascriptcssswitch-statement

Obtaining data attributes in Angular 8

I'm working with Angular 8 and I came across an issue. In my code snippet, there are two data attributes assigned to a button element, but only one attribute is showing up. Is this a syntax error or a bug? <button [attr.data-popolamento]="all" [a ...

htmlangulartypescript

What is the best way to create a sliding animation on a div that makes it disappear?

While I may not be an expert in animations, I have a question about sliding up the "gl_banner" div after a short delay and having the content below it move back to its original position. What CSS properties should I use for this animation? Should I use css ...

javascripthtmlcsscss-transitionscss-animations

Tips on concealing and deactivating the fullscreen option in flowplayer

Could someone please assist me in resolving this issue? I've been attempting to hide the fullscreen button from the flowplayer, but so far, I haven't found a solution. Below is my JavaScript code: <script> $f("player", "flowplayer/flowpla ...

javascripthtmlflowplayer

What might be causing the sticky footer to malfunction on the Samsung Galaxy Note 2's default browser?

I recently implemented a sticky footer design on my website, following the guidance of Ben Frain's book "Responsive Web Design with HTML5 and CSS3" (second edition). While it works flawlessly on most modern browsers, I encountered an issue with the Sa ...

androidhtmlcss

Collapsed navbars in Bootstrap 5 fail to display properly in a two-column format

Looking to create a responsive Bootstrap 5 navbar that collapses at the md breakpoint and displays navlinks in two columns upon collapse. Currently facing an issue where the navbar remains expanded and the toggle button fails to work after hitting the br ...

htmlcssbootstrap-5

Divs aligned horizontally with uniform height and vertical divider separating them

Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the o ...

htmlcss

Infinite scrolling feature on Kendo UI mobile listview showcasing a single item at a time

Currently, I am utilizing the kendo ui mobile listview and encountering an issue when setting endlessScroll or loadMore to true. The problem arises as the listview only displays the first item in such instances. Upon inspecting with Chrome inspector, I ob ...

javascriptcsslistviewkendo-ui

CSS files are failing to load in ASP .NET framework

I am facing a similar issue to the one described by another user on Stack Overflow here: Asp.NET not applying my CSS files However, after adding the following code to my web.config file, nothing seems to change: <location path="css"> &l ...

cssasp.net

Creating an android.jar for mocking purposes: A step-by-step guide

I am in search of a mockable android.jar. I have come across an android.jar generated automatically by Mockito or Gradle or Android Studio. How can I create one in a Gradle task? I attempted using ./gradlew mockableAndroidJar, but was unable to find the ...

androidandroid-gradle-pluginmockitoandroid-testing

Ways to reach the standard look

Check out this follow-up to a previously posted issue. Click here to view it I am currently facing an issue with the code below, where I am unable to make the second button inherit the default border and padding styles. Any assistance would be greatly app ...

jquerycsshtmljquery-animate

How can I dynamically update a div without refreshing the page by using an onclick event on a

When working on my project, I found helpful insights from this Stack Overflow thread. The structure of template-comparison.php involves fetching code from header.php to ensure the page displays properly. However, the actual "fetch code" process remains un ...

javascriptphpjqueryhtml