problem specifically occurring on tablets with fixed positioning

Have you checked out the site I'm referring to here?

An unusual issue seems to be occurring specifically on tablets.

We implemented the scroll to fixed jQuery plugin to fix the position of the sidebar after scrolling, which works perfectly on all devices except for tablets. On tablets, when you scroll quickly, the sidebar momentarily disappears and then reappears. However, if you scroll slowly, it behaves normally. It's a bit difficult to explain, but you can view the phenomenon here

This issue occurs in Safari and Chrome as well.

I initially suspected it may be an issue with the plugin itself, so I shared other similar plugins with the client:

Yet, the issue persists across all these plugins, leading me to believe it might be related to iPads or tablets...

Has anyone encountered this issue before? Any ideas for resolving the "scroll to fixed" effect on tablets?

Answer №1

Source: http://example.com/scrolling-issues-mobile

In some mobile browsers, the onscroll event will only be triggered once scrolling has come to a complete halt. This not only includes the actual touch-based scrolling but also any momentum from the user's scroll. The event won't activate until all movement has ceased, making it challenging to apply real-time visual changes as the user scrolls.

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

Display or conceal various objects using a single button in HTML

I've been working on creating a chatbot widget for my website, but I've run into an issue. The "Chat with us" button only shows the bot and not the close button as well. Here's what I've attempted: <input id="chat" type="button" on ...

The newly added highlighted CSS in jQuery cannot be removed once an alert is generated

http://jsfiddle.net/Cyjye/ I am a beginner with jquery. I have created an HTML table shown in the jsfiddle link. Initially, the selection should be made from the second row, second cell, but in my HTML table, the selection is being made from the first ro ...

How can I position text next to an input within a <td> element in a vertical arrangement?

Below is the HTML code: <fieldset><legend>Callout Report</legend> <table> <tr><td>Start Time</td><td> <input type="text" id="startTimeUI" autocomplete="off" /> </td></tr> <tr><td& ...

Tips on expanding the space between words in a scrolling "marquee" text

Looking for some assistance with my jQuery project involving a horizontal scrolling "marquee" text. I am currently trying to adjust the size of the gap between the phrases in the marquee. Here is an example with the phrase "HEY THERE". jQuery(document ...

The navigation dropdown menu in Bootstrap 4 spills over the edges of the window

In the code snippet provided above, an example of a navbar with a dropdown menu is given. One issue that arises is when the dropdown menu is clicked and it overflows to the right, causing a horizontal scroll bar to appear on the window. The question at ha ...

Rotating an HTML caret using CSS does not pivot from the center point

Is there a way to adjust my simple caret rotation to make it rotate from the center? What changes should I make? const Wrap = styled.div` width: 100px; background: grey; span { display: block; transform: ${(props) => (props.isOpen ? " ...

Evaluate One Input Value to Determine Another Input Value

Hey there, I've made an update to the fiddle but let me clarify what I'm trying to achieve. My goal is not to implement form validation as I already have that covered with the HTML5 "required" attribute. What I'm aiming for is to customize t ...

When passing an array from jQuery to PHP using Ajax, the value displayed is simply "Array" instead of the actual

Could anyone please assist me in identifying my mistake? js file: //Checkboxid is an array that gets filled using .push(); $.ajax({ type: "POST", url: "test.php", dataType: 'html', data: { data: Checkboxid }, success: functio ...

Effective URL structure with nested ui-view in AngularJS

It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...

jQuery script for reversing the collapse/expand feature

Here is a test showcasing an expand/collapse jQuery script. Currently, the div is collapsed on page load and you need to click it to see the content. Is there a way to change this so that the div is expanded on load and collapses upon clicking? <style ...

Steps for dynamically updating an Ember input field using code

I am working on an Ember Application where user input is taken in an input field, formatted in American currency, and displayed back to the user. The template code is: <script type="text/x-handlebars" id="index"> {{input value=savings id="userS ...

Chrome (on both Linux and Windows) is not compatible with CSS

Here is the code snippet I am currently working with: <style type="text/css"> div { margin: 100px auto; width: 0px; height: 0px; border-right: 30px solid transparent; border-top: 30px solid red; border-left: 30px solid red; border-bottom: 3 ...

Unsuccessful Ajax call in Rails application

I'm a bit perplexed as to why my Ajax call is failing. It was previously working fine and I can't identify any changes that might have caused it to stop. When I initiate the call, an error pops up in Firebug's console pointing to this sectio ...

Always take the lead with the first image in navigation

Looking to add an image to your website navigation? Want the image to appear at the beginning of the navigation bar, before Link 1? Here's a bit of CSS code for you: <div class="topnav"> <img src="https://cdn.mos.cms.futurecdn ...

Placing a pair of labels onto a bootstrap form while ensuring column alignment

I'm trying to format a form according to my UI/UX specifications, where there is a parent label and two sub-labels. Can this be achieved using Bootstrap? https://i.stack.imgur.com/J8wJZ.png However, I'm struggling to align the columns and rows ...

What is the best way to print a canvas element once it has been modified?

My goal is to include a "Print Content" button on a webpage that will print a canvas element displaying workout metrics. However, the canvas content, which consists of a visual graph of workout data, changes based on the selected workout (bench, squat, etc ...

Invent a dynamic header effect in Swift that expands with user

I am facing an issue with my UICollectionView setup, where I have a UIView as a header. My goal is to achieve a stretchy header effect when the user scrolls down. After experimenting with some code, here is what I have tried: func scrollViewDidScroll(sc ...

Is there a challenge in setting up a tag search bar similar to Stack Overflow's?

First and foremost, I apologize for the awkwardly phrased question. The issue at hand is that when the tags exceed the container size, the search option becomes hidden. My goal is to have the search bar adjust dynamically, moving everything back inside the ...

triggering php object on mouse hover

I'm currently working on creating a mouseover effect for my PHP elements within a store. My goal is to have a transparent div appear over the dynamically generated PHP sections. I have set it to display block mode to test its functionality and positio ...

Increase the height of a div dynamically in HTML during program execution

Within my datagrid, there exists an expandable/collapsible section above the content (see Picture 1 https://i.sstatic.net/N68Rl.png). Upon expanding the content, a scroll bar appears within the datagrid element to display the data (see Picture 2 https://i. ...