Rapidly browsing through pages on Firefox, iPad, and Safari may lead to elements momentarily vanishing and then promptly reappe

I'm puzzled by the occurrence of this issue. It's particularly noticeable on Firefox and iPads, although Safari also experiences a slight problem.

This glitch manifests in two instances for me.

My setup includes a dark background image with a white container overlaying it, occupying 90% of the screen and housing all the content. When I scroll rapidly on Firefox or an iPad, the white container intermittently disappears and then reappears.

In addition, there is a navigation bar that should switch to a fixed position once the user has scrolled 30 pixels down; it cannot be initially fixed, though. While Chrome executes this function correctly, Firefox and Safari introduce a delay before implementing the fixed menu.

The issues observed on the iPad seem similar to those discussed here: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay.

The content disappearing only seems to occur during rapid scrolling, whereas the delayed menu change transpires with any scrolling speed; normal scrolling reveals the desired behavior.

cssipadfirefoxsafari

Answer №1

Issue with Elements Disappearing During Scroll

The disappearing elements during scroll is a common issue caused by browsers struggling to render quickly enough to keep up with the scrolling speed. Instead of displaying a choppy scroll, the browser pauses rendering until it can catch up. This is especially noticeable on mobile devices where resources are limited and fast scrolling is common.

Delayed Navbar Scrolling Event

The delay in navbar scrolling events varies depending on the browser's optimization for smooth scrolling performance. Some browsers may prioritize completing the scroll smoothly before handling costly 'onscroll' events. Additionally, some browsers utilize hardware acceleration techniques that impact how scrolling events are processed.

Here you can find an insightful article on HTML5 Rocks that delves deeper into how browsers implement hardware acceleration for improved performance.

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

The issue with the mobile display of the search navigation bar in Bootstrap 4

On PC, the search navigation bar with links appears to the right of the search bar. However, this layout is not working properly on Android or iPhone devices. I've tried solutions from different sources like using .navbar-header and enclosing the lin ...

htmlcssbootstrap-4thymeleafsearchbar

How come the size of an image does not adjust in a predetermined list?

My goal is to create a basic gallery. I have specified the width and height of li and the size of img, but it's not working as expected. I want all images to be the same sizes. What am I missing in my code? body { margin: 0; padding: 0; ...

htmlcss

The footer should remain at the bottom of the page without being permanently fixed

Is there a way to keep the bootstrap footer at the bottom without fixing it in place? In the code example below, the footer should always appear at the bottom. The white space after the footer should come before it. Using sticky-bottom achieves this, but ...

javascriptcsstwitter-bootstrapbootstrap-4footer

Discovering the dynamic dimensions of a div using jQuery

I'm curious if there's a way to dynamically retrieve the size of a div while it's being resized. Currently, I'm using jQuery 1.10.2 and have implemented a resizable div. However, I've noticed that the events 'start' and ...

jquerycsshtmlsizeresizable

When using Ruby and Rack on Heroku to serve a static site, the CSS styling may not be

Trying to deploy a static site consisting of HTML, CSS, font, and image files with Ruby Rack has been a bit challenging. While the HTML displays perfectly in Chrome when running it locally, the CSS assets do not seem to be loading or being applied to the H ...

htmlcssruby-on-railsrubyheroku

How can I maintain code reusability while customizing buttons with pseudo-elements to display unique content on each button?

I have a ul in my HTML with lis that contain navigation options such as home, contact, about, etc. I am trying to figure out the best way to add a unique effect to each button since they all have different content and require different icons. Essentially, ...

css

I'm having trouble setting the margin to 0 in Bootstrap 4. I'm only using CSS for styling and JavaScript for

Currently in the process of setting up a grid layout for a webpage under development. Encountering an issue with the .container class, that is supposed to contain all my div elements, not having any margin. Managed to remove the margin on the left side usi ...

htmlcssbootstrap-4

Stop jQuery popups from wrapping text when resizing the browser window

Whenever a link is clicked, a jQuery popup appears. The popup functions properly in terms of opening and closing, but I would like to ensure that its position remains fixed when resizing the browser window to avoid any wrapping issues. Typically, I use a ...

javascriptjqueryhtmlcss

Issue with Jquery's .addClass and .removeClass functions

I'm having trouble implementing a dynamic menu on my webpage using jQuery. I've tried writing the code myself but it doesn't seem to be working as expected. The structure involves three classes: .dead, which sets display: none; in CSS, .hea ...

jqueryhtmlcsstwitter-bootstrap

Is a responsive mega menu with rollover effects available for Bootstrap?

Looking to develop a responsive megamenu for bootstrap 3, I recently came across one that caught my eye: I decided to implement it into my own project at However, I encountered a major issue with the menu functionality on desktop devices, as it requires ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

Is there a way to customize the color of the navbar dropdown that appears when the screen size is shrunk?

The current code I have is producing this result. Visit the website I am looking to modify the color of: the three bars Is there a way to do this? I used the nav element for this. Even though I already have custom CSS for navbar colors, I am unsure ho ...

htmlcssbootstrap-4

Mobile values in tailwindcss take precedence over breakpoints values, overriding them

I have encountered a puzzling issue that seems to have no answers thus far. Whenever I set paddings or margins for mobile devices and attempt to adjust these values for larger screens, the original mobile base value stubbornly persists and overrides my sp ...

cssnext.jstailwind-css

The list in the navbar is misaligned and not centered vertically within the flex container

I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code. <nav className="nav navbar"> <h3> Logo </h3> <ul className= &q ...

htmlcssreactjs

Can Bootstrap CSS take precedence over a theme's styling?

After working with various WordPress theme templates, I am now ready to take on the challenge of creating my own custom themes. One aspect I would like to incorporate is utilizing Bootstrap to ensure my website is responsive. However, I have some questions ...

phphtmlcsswordpresstwitter-bootstrap

Issue with CSS heights on WordPress pages with relative positioning

Currently, I'm utilizing the position:relative and top:-120px properties to shift the header background image below two header <div/>s. This method is effective in achieving the desired layout. However, I had to adjust the position of the wrappe ...

csswordpress

Interested in providing placeholder with 2 distinct colors?

Is it possible to change the color of a placeholder text to two different colors? Let's take a look at the code: <input type="text" class="form-control setting-form" id="inputDefault2" placeholder="http://blabbr.im/#itsmyne ...

htmlcssplaceholder

Using jquery for creating a dynamic tree menu

Looking to add a tree menu for this example. Initially all sections should be collapsed. Upon clicking on "Facility," the Buildings should expand in a tree-like format, and further clicks on XYZ building should reveal the Floors. Something along those line ...

javascriptjqueryhtmlcss

Styling a fixed footer on the last page using CSS for printing

I am working on optimizing an HTML article for printing by adding a print stylesheet. However, I am facing an issue where the footer is always positioned after the last bit of content instead of at the bottom of the last page. https://i.sstatic.net/MePJU. ...

htmlcsspdf

ASP.net Image slider using jQuery

I am in search of an image slider that I can customize to fit my needs, similar to the one showcased in the link provided below. Although I have already tailored the script to suit my requirements, I am currently facing an issue with changing the image tr ...

javascriptjqueryasp.netcss

The iOS platform is experiencing issues with displaying the entire page, making it difficult to

Struggling with my website for Freecodecamp. Works fine on desktop, but iOs is a nightmare. My contact page isn't showing at all, and 75% of the bottom is cut off. Even worse, I can't click on what's visible. Help needed! Only tested on iPho ...

htmlcssbootstrap-4