iOS: Incorrect element is currently being scrolled by the user

I encountered an unusual scrolling problem on iOS (7 or 8) while browsing www.cahri.com/tests/scroll

How can you replicate this issue?

  1. Visit the example page on your iPhone/iPad/iOS Simulator in landscape mode
  2. Use your right thumb to touch and scroll the main content (right side)
  3. Release your right thumb
  4. Now, use your left thumb to touch the left side (which is a div with overflow: scroll) and attempt to scroll. Instead of the div, the entire page scrolls. Release your left thumb.
  5. If the issue doesn't occur immediately, repeat steps from 2 until it does.
  6. Try touching the left side again with your left thumb, it should now scroll correctly.

Any insights on what might be causing this problem? How can it be resolved?

ioscssscroll

Answer №1

When it comes to iOS web browsers, fixed positioned elements like your left div can sometimes cause trouble with scrolling. In my experience with various web projects, I've encountered issues and bugs that are hard to explain. While I don't have a perfect solution, I just wanted to share that I've faced similar challenges before :)

One possible approach is to avoid fixed positioning and scrolling for mobile devices altogether or consider using a third-party scroll library such as .

In my personal use, these libraries have been quite effective on iOS devices.

Alternatively, if you prefer a different mobile solution, you could utilize media queries to adjust the positioning of elements based on screen size.

@media screen and (max-width: 600px) {
  .column-left { ... }
}

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

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

javascriptcssreactjscolors

Displaying two images side by side in HTML using Bootstrap

As a beginner in HTML, I am faced with the challenge of placing two images of different sizes side by side on the same row using HTML and Bootstrap. Below is my current code: <div class="row"> <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6"> ...

jqueryhtmlcsstwitter-bootstrap

The text within the button disappears when in the :before state

After implementing the code from this codepen, I decided to use the 3rd button design. .btn { line-height: 50px; height: 50px; text-align: center; width: 250px; cursor: pointer; } .btn-three { color: #FFF; transitio ...

htmlcssbuttonhover

Adding additional images to the left side of the slide

My goal is to display multiple images in two rows. The alignment works well for up to 9 images, but beyond that, the additional images appear on a third row instead of staying within the two rows. I want to ensure they are contained within 2 rows only. How ...

htmlcss

The issue of the color CSS rule not being applied to the button element when transitioning from disabled to enabled on browsers like Safari 14+ is a common challenge

There seems to be an issue with frontend form validation code affecting the disabled attribute of a submit button within a form. Two different css rules are applied for the enabled and disabled states, including changes in the text color of the button ele ...

cssiosmaterial-uiwebkit

Issue with Flat-UI: Navigation bar is not collapsing correctly. Need help to resolve this problem

I am currently utilizing the most recent Twitter Bootstrap along with Flat UI. I have been trying to create a basic navbar that collapses when the screen size is reduced. How can I resolve this issue? This is how it currently appears: My navigation items ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Adjust CSS to properly position links alongside details summary

Currently enhancing my Hugo site (repository link is here). I am aiming to integrate a details element alongside anchors, maintaining a consistent style. The desired layout is depicted in the initial screenshot where "abstract" serves as the details elemen ...

htmlcsshugo

What is the best way to clear the selected option in a dropdown menu when choosing a new field element?

html <div class="row-fluid together"> <div class="span3"> <p> <label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards& ...

javascriptjqueryhtmlcssdrop-down-menu

Incorporating a YouTube or Vimeo video while maintaining the proper aspect ratio

On my video page, I embed Vimeo videos dynamically with only the video ID. This causes issues with the aspect ratio as black bars appear on the sides due to the lack of width and height settings. The dynamic video ID is implemented like this: <iframe ...

javascripthtmlcssvideoyoutube

Using jQuery to remove the 'active class' when the mouse is not hovering

I recently came across this amazing jQuery plugin for creating slide-out and drawer effects: However, I encountered a problem. I want to automatically close the active 'drawer' when the mouse is not hovering over any element. The jQuery plugin c ...

jquerycssjquery-plugins

Tips for decreasing the space between elements in flexbox using justify-content: space-between

I'm in the process of creating a footer for my website and I've decided to utilize flexbox for the layout. Below is the CSS code I am using for my footer: .footer { display: flex; flex-direction: row; align-items: center; justify-content ...

htmlcssflexbox

What could be causing my form to not be centered on the screen?

Currently working on creating a form for adding books to a fictional library website. The form tag is enclosed within a div, but despite the CSS styling applied, it remains fixed to the left side of the screen and I'm struggling to understand why. .fo ...

htmlcss

Tips for customizing bootstrap's fixed navbar-default to ensure that the list items align downwards:

Is it possible to customize the bootstrap fixed navbar-default so that the li elements align downward instead of at the top? If you have any corrections or custom solutions, I'd love to see them! Feel free to share your code on platforms like CodePen, ...

javascriptjqueryhtmlcsstwitter-bootstrap

Struggling to configure Realm for ReactNative: The command 'rnpm link realm' freezes with no additional information or output provided

I recently attempted to set up Realm for a React Native project, but I encountered issues during the installation process. Specifically, the command rnpm link realm did not seem to work as expected. Here is a breakdown of the steps I followed (referencing ...

iosnode.jsnpmreact-nativerealm

Don't forget to preserve the hover state of divs even after refreshing

I recently added a navigation bar that expands in width upon hovering over it. For an illustration, check out this example: http://jsfiddle.net/Gsj27/822/ However, I encountered an issue when clicking on a button within the hover effect area. After load ...

javascripthtmlcss

Variations in the implementation of responsive web design on laptops versus mobile devices

Looking at the css code below: @media only screen and (min-width: 0px) and (max-width: 768px) { ... } I'm curious about why, on my laptop, when I resize the browser window to exactly 768px, the css properties inside this media query are applied. ...

androidhtmlcss

Ensure that the child div is anchored to the bottom of the parent div container

I am looking for a way to ensure that the subfooter div stays at the bottom of the childbox div, similar to a footer. You can view the code on this jsfiddle link <div class="parentbox"> <div class="childbox"> <div id="subfooter" ...

htmlcss

PHP: Issues with displaying data from a SELECT * FROM query in tables

My goal is to style tables pulled from my database so that the columns in the rows align with the column names for better readability. I attempted to use PHP to achieve this by creating a table outside a while loop to display the names and then starting t ...

phphtmlcss

What is the solution for fixing scrolling while keeping the header fixed and ensuring that the widths of headers and cells are equal?

Is there a way to set a minimum width for headers in a table and provide a scroll option if the total width exceeds 100% of the table width? Additionally, how can we ensure that the width of the header and td elements are equal? Below is the HTML code: ht ...

javascripthtmlcsshtml-table

Selenium is having trouble reading the text from a dropdown that has the autocomplete feature disabled

It seems that Selenium is having trouble retrieving the text from the dropdown options. Here is a snippet of the code I am working on: WebElement dropdown=driver.findElement(By.id("selFromAccount")); List<WebElement> dropoptions=dropdown.findElemen ...

jqueryhtmlcssseleniumautocomplete