In Firefox mobile, a fixed positioned element will move with the page until the scrolling comes to a halt

I am facing an issue with a CSS element set to position: fixed.

While it works perfectly on desktop browsers, it behaves poorly on mobile browsers, especially Firefox.

The main problem is that the fixed element scrolls along with the page and then abruptly snaps back into its original position after scrolling stops.

To see the issue in action, check out this demonstration: (Focus on the “Top” block at the bottom right corner, which is the fixed element)

https://i.sstatic.net/zod73.jpg

Any suggestions on how to fix this issue?

javascriptjqueryhtmlcssfirefox

Answer №1

If you're looking to make your website mobile-friendly, the concept of "fixed" positioning is crucial. Check out this comprehensive discussion on the topic:

One helpful tool you can utilize for achieving fixed elements on your mobile site is jQuery Mobile. Learn more about it here:

If you implement jQuery Mobile, you'll be able to create something like this:

<div data-role="header" data-position="fixed">
  <h1>Fixed Header!</h1>
</div>

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

I attempted to publish my React application using gh-pages and encountered the following error: "The argument for 'file' must be a string. However, it was received as undefined."

I encountered an issue while attempting to deploy my React application with gh-pages. The error message I'm facing states: "The 'file' argument must be of type string. Received type undefined." Initially, I suspected that the problem was wi ...

javascriptreactjsgithubnpmgithub-pages

scroll after loading jQuery

I am attempting to automatically scroll to the div that displays the results of a jQuery load operation. Although the ajax load is functioning properly, the page does not automatically scroll after the load. Why isn't this test code accomplishing th ...

jqueryajax

What is the most effective way to access a variable from a service in all HTML files of Angular 2/4 components?

In my angular 4 project, I have an alert service where all components can set alerts, but only specific components display them in unique locations. My question is: how can I access a variable from this service across all HTML files? The structure of my s ...

javascriptangularangular-cli

CSS border-image negative positioning (no HTML required)

We are on the lookout for a way to apply a specific border style to nearly all img tags within the content area of a CMS (such as Wordpress or Joomla). Our goal is to achieve this solely using CSS without having to access any parent tags: The initial step ...

jqueryimagecssoffsetborder-image

How come my jQuery $.each() function is yielding 4 objects instead of the expected one?

I have a button that triggers an ajax call to this URL: http://jsonplaceholder.typicode.com/. When the code doesn't use $.each(), it retrieves just one post. However, when $.each() is utilized, it returns four objects. Refer to the screenshot below: ...

jqueryajaxjson

Looking for a way to extract Regular Expressions from an IgGrid cell in Infragistics?

Is it possible to apply a regular expression to a igTextEditor within an igGrid Updating? I attempted to utilize the validate option, but it was unsuccessful. $("#schedulerTable").igGrid({ columns: $scope.schedulerColumns, widt ...

javascriptinfragisticsignite-uiiggrid

The release of Firefox 53 came with a new version of Gecko (0.16.1), but unfortunately, users are experiencing

Here is the setup I am using: Operating System: Windows 10 64-bit IDE: Visual Studio Enterprise 2017 Programming Language: C# testing project Browser: Firefox 53.0.3 (64-bit) Driver: Gecko driver geckodriver-v0.16.1-win64 Selenium Library: Selenium.WebDr ...

c#seleniumfirefoxgecko

Press the Enter key to submit

Encountering issues while trying to enter an event. Despite reviewing several posts on this matter, a solution has not been found yet. The project needs to function properly in Chrome, FF & IE (8,9,10,11), but it is currently not working on any browser. T ...

c#javascriptjqueryasp.net.net

Easily update the title of a webpage in the browser's history using JavaScript

Is it feasible to use JavaScript to modify the title of a page in the browser history even after the page has finished loading? This functionality should work consistently across different browsers, including those that do not support the HTML5 History API ...

javascriptangularjsgoogle-chromebrowser-history

Execute Javascript to simultaneously open various links in a single action (not using popups)

I am looking to open multiple URLs with a single click event that also redirects to a specified URL. I have attempted this, but it doesn't seem to be working as intended. Here is the HTML code: <a id="mybutton" href="http://example.net/quote" onc ...

javascriptjquery

Having difficulty with utilizing array.every() properly, leading to inaccurate results

Struggling to validate an array of IDs using a custom validator in a nestjs project. The issue arises when passing the array of IDs to a service class for database querying, as the validation always returns true even with incorrect IDs. Snippet of the cus ...

javascriptexpressnestjstypeormclass-validator

Implementing a Variety of Textures and Images in a Three.js Scene

I am utilizing THREE.js to showcase a 3D spinning globe in the web browser. Along with that, I intend for an image to display around the rotating globe. Despite attempting to use the provided function, var img = new THREE.ImageLoader(); img.load("texture/ ...

javascriptjqueryhtmlthree.js

Modify the CSS using JavaScript after a brief delay

I'm creating a homepage that includes animations. Inside a div, I initially have display: none, but I want it to change to display: block after a few seconds. I've been trying to use JavaScript for this purpose, but I'm struggling to find th ...

javascriptcss

Troubleshooting: Why is my AngularJS Controller not functioning properly

I attempted to run a basic Angular example utilizing a controller, but it does not appear to be functioning correctly. Below is the HTML code: <!DOCTYPE html> <html ng-app = "app"> <head> <title></title> ...

javascriptangularjscontroller

Inject dynamic HTML to various elements on an AngularJS form and incorporate it into the scope when the button is clicked

Below is an example of a form: <h4>Now let’s break it down. Tell us about the users.</h4> <div id="user1"> <p class="bold">User #1</p> <label>User type:</label> ...

jqueryangularjsangularjs-directiveangularjs-scope

Personalized Jasmine matchers for a Protractor/WebDriverJS component

Greetings fellow developers, I'm looking to create a custom matcher for Protractor/WebDriverJS element. Can anyone assist in improving my current code? Here is what I aim to include in the specs files: var button = element(by.tagName('button&a ...

javascriptangularjsseleniumjasmineprotractor

Tips for showcasing boxed numerical characters on a website

Currently, I am tackling a project that involves converting a PDF into HTML. The original .ai file shows some numeric characters inside a box: https://i.sstatic.net/dAMU2.png Even though I am aware that the font used in the file is GothicMB101Pro DeBold- ...

cssfontswebfontsadobe-illustrator

Can diverse array elements be divided into separate arrays based on their object type in JavaScript?

Looking to create new arrays based on objects with similar attributes from an existing array? Here's how: Starting with this [ {name: "test", place: "country"}, {name: "walkAndEat", Long: 100, Lat: 15, Location: "place name"}, {name: "te ...

javascriptarraysangularjsmean

What could be causing my page width to only expand to 100% when using "fit-content"?

After searching extensively, I'm unable to find a solution that fits my current issue. My goal is to construct a practice ecommerce website using React. One of the components I have is a header which I'd like to occupy 100% of the screen width, c ...

javascriptcssreactjswidth

Embed the picture into the wall

I recently constructed a wall using three.js and would like to add an image similar to the one shown in the example below. Since I am still new to three.js, I am seeking assistance with placing the image. Can anyone provide guidance on how to do this? ...

javascriptthree.js