"Issues arising when attempting to create a scrollable section within another scrollable section specifically on iOS

This particular code snippet is functional when used on desktop computers and Android devices, but unfortunately does not seem to work properly on iOS. Any assistance or guidance in the right direction would be greatly appreciated.

Click here to view the code snippet

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.holder {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.content {
    width: 100%;
    height: 128px;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.row {
    width: 3000px;
    height: 100%;
    background-image: -webkit-linear-gradient(
        left,
        rgba(0, 0, 255, 0.0)   0%,
        rgba(0, 0, 255, 1.0) 100%
    );
}


<div class="holder">
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
</div>
ioscssscroll

Answer №1

When using IOS Safari, if the width is being ignored when in percentage, try converting it to pixels instead to fix the issue. You can check out the fiddle link below for more information.

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            .holder {
                position: relative;
                width: 1000px;
                height: 100%;
                overflow-y: scroll;
                overflow-x: hidden;
       -webkit-overflow-scrolling-x: touch !important;
            }
            .content {
                width: 1000px;
                height: 128px;
        display:block;
        float:left;
                overflow-y: hidden;
                overflow-x: scroll;
        -webkit-overflow-scrolling-x: touch !important;
            }
            .row {
                width: 3000px;
                height: 100px;
        display:block;
        float:left;
                background-image: -webkit-linear-gradient(
                    left,
                    rgba(0, 0, 255, 0.0)   0%,
                    rgba(0, 0, 255, 1.0) 100%
                );
            }
        </style>
    </head>
    <body>
        <div class="holder">
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
           (additional content here)
         </div>
    </body>
</html>

https://jsfiddle.net/pe6t29kf/11/

Answer №2

After reviewing your code, I noticed that you have set the .row class with a fixed width, which may be causing horizontal scrolling issues for every element with that class. Could it be that the problem lies specifically with horizontal scrolling? Although I don't own an iPhone myself, it was mentioned that the provided code works on iOS. Is it a possibility that the content requiring horizontal scrolling is dynamically created?

If this is the case, have you attempted to ensure that the content always triggers scrolling by setting a specific width or min-width, perhaps exceeding 100%?

<div class="holder">
    <div class="content">
        <div class="row" style="min-width: 101%"></div>
    </div>
</div>

While not an iOS expert, if dynamic content is involved, there's a chance that an iOS-specific scrolling quirk might be causing the issue.

iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability

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

Bone Structure Styles - adaptable form

I'm currently working on a form using skeleton css and initially set it up with a three-column layout. However, I found that this created too much white space due to varying content lengths in each column. I would like to switch to a horizontal layout ...

htmlcssmobileresponsive-designskeleton-css-boilerplate

Creating a dynamic grid layout using div elements and CSS/Bootstrap

https://i.sstatic.net/o9wmq.png Looking to achieve a design like this using either pure CSS or Bootstrap. The goal is to have each button be a fixed size and arranged in a list format without specifying exact row or column lengths. For example: <div c ...

htmlcssbootstrap-4

The art of utilizing a protocol

I currently have two viewControllers: ServiceProvider WorkLocation The ServiceProvider viewController contains a text field and a pick button. When the user clicks on the pick button, it redirects to the WorkLocation page which displays a list of availa ...

iosiphoneios7protocols

The UUID representing the MAC address of a beacon

Can the MAC address of an iBeacon be used as a UUID by adding extra digits to fill up the 32-digit requirement, considering that a MAC address is only 12 digits long? ...

iosbluetooth-lowenergyibeaconibeacon-androidbeacon

What is the proper way to set a margin on a fixed div that has a width

I am looking to create a fixed header that allows the content (body) to scroll underneath it. The challenge arises when the parent element has some margin-right, causing the fixed header to extend beyond the parent's width and occupy 100% of the windo ...

cssmarginfixed

Is there a way to customize the font size of Material UI Autocomplete?

I'm currently trying to customize the Material UI Autocomplete component with my own CSS. Specifically, I aim to adjust the font size of the input field. Below is my current implementation: <Autocomplete style={{ width: 200, height: 60, ...

cssreactjsmaterial-ui

Reversing animation in styled components when a prop is set to false

One interesting challenge I encountered recently was passing an open prop to a styled component in order to implement animations for a hamburger icon. Here is the code I used: const StyledBurger = styled.button` display: flex; flex-direction: column; ...

cssreactjsstyled-components

CSSLint linter encountered an error during execution

Recently starting out in web development, I decided to use Atom and was working on a project involving HTML and CSS. Everything seemed to be going smoothly until I attempted to link an external CSS file with my HTML. At that point, I encountered the follow ...

htmlcssatom-editorlinter

Troubleshooting Problem with Centering Rows in Bootstrap

I am utilizing the most recent version of Bootstrap 3 to design a website for a friend, but I am encountering a challenge with centering elements on the page. Typically, I would use the following code: .center{ width: 90%; margin: 0 auto; } Howev ...

jqueryhtmlcsstwitter-bootstrap-3spacing

Converting Scalable Vector Graphics to Hypertext Markup Language and

So I've got this SVG file called 7.svg. What's the best way to show this image using HTML or CSS on my index.html page? ...

htmlcsssvg

Firefox fails to apply styles to elements that are empty

Below is a snippet of code for a table with editable content: table { border-collapse: collapse; } th, td { border: 1px solid gray; padding: 3px 6px; } [contenteditable]:empty:not(:focus)::before { content: attr(data-placeholder); color: gr ...

cssfirefoxcontenteditable

Implementing a queue with an on-click event

As a self-proclaimed Java nerd diving into the world of jQuery, I'm facing some challenges. My goal is to create 3 interactive boxes that behave in a specific way: when clicked, one box should come forward while the other two dim and stay in the back ...

javascriptjqueryhtmlcss

What strategies can I use to dynamically update the .active class in jquery so it doesn't only target the initial one?

Utilizing bootstrap for tab-fade functionality has been successful so far. However, I am facing an issue when trying to select multiple active classes instead of just one. My current JQuery code only changes the text in the first element with the "active" ...

javascriptjqueryhtmlcss

Included new Category and encountered 35 linker errors

Encountering linker errors that are proving to be quite puzzling. Recently, I included a Category in my iOS project named ParentViewController+CoreData. Strangely, despite not adding any content to this category in either the .h or .m files, importing it i ...

iphoneioslinker-errorsobjective-c-category

Conforming to 'BinaryInteger' is not possible for the type '((Any) throws -> Bool) throws -> Optional<Any>'

I have encountered a problem while attempting to convert a message from the Apple Watch's WC session [String: Any]. I am currently customizing a sample project that retrieves heart rate data from the Apple Watch and sends it to an iPhone. I have been ...

iosswiftwatchoswatchconnectivity

Adjusting label widths in Fieldcontain with JQuery Mobile

I've done a lot of research online, and it seems like a common issue. In the past, I have tackled this problem using a <table>, but I am now looking to resolve it using CSS instead of relying on JQM's data-grid. The simple problem I am fac ...

jqueryhtmlcssjquery-mobile

Align two divs with text in the center

I am having trouble centering two divs horizontally and aligning them between each other. The issue arises when I add text of different sizes in each div. Here is an example: http://jsfiddle.net/DgEcs/1/ Why does the red div move down and how can this be ...

css

The feature of Switch css does not appear to function properly when used in conjunction with input type

Why does the switch button not work with the input type radio but works with a checkbox button? How can I maintain the radio input and solve this issue? @charset "utf-8"; /* CSS Document */ /* ---------- GENERAL ---------- */ body { background: #4a4a4 ...

htmlcssinputchecked

Personalize Radio Buttons and Checkboxes using CSS

Can the styling of radio buttons and checkboxes be customized using only CSS? Many existing solutions involve using images and javascript, but I'm curious if it can be accomplished solely with CSS. ...

csscheckboxradio-button

Customized progress bar for monitoring lengthy JavaScript calculations

I am currently working on a project that involves using javascript with jquery and bootstrap. My main objective is to have a visually appealing progress bar displayed during heavy javascript computation. Despite knowing the exact progress state of the comp ...

javascriptcssprogress-bar