Is Webkit's Overflow Scrolling feature hiding the divs on your website?

I recently implemented a design for my website where the content is contained within an absolute positioned div that takes up the entire screen. However, I noticed that the scrolling on this div felt clunky and not as smooth as I would like it to be. After some research, I found a solution which involved adding 

-webkit-overflow-scrolling: touch;
to the div.

Now, with momentum scrolling in place, I encountered a new issue where the individual elements within the div were not displaying properly when I scrolled down the page. Despite checking the console for errors and verifying that the page itself was functioning correctly, the posts within the div were still missing. This problem was especially noticeable on iPad devices. Here's a specific example of what I'm experiencing:

If anyone else can replicate this issue on their iPad or has suggestions for a potential fix, I would greatly appreciate your input. Ideally, I'd prefer not to resort to using Scrollability or similar plugins. It's possible that this issue may be related to the iOS6 beta version, but I would like some reassurance before moving forward.

Feel free to visit the site on your own iPad to see the problem firsthand.

And if you're curious about my bookmark organization system, I'd be happy to explain it further.

htmlcssiosmobile-safari

Answer №1

It appears that the issue with the .post CSS class can be resolved by removing the position: relative line. This seems to be related to relatively positioned elements being hidden when not in view on iPad devices. It's possible that this behavior is meant to optimize efficiency on iPads, as they prioritize performance over certain animations like JS scrolling.

You may find a workaround in this article: CSS3 property webkit-overflow-scrolling:touch ERROR

For more information, you can also check out: Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging

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

Converting an HTML page into a JSON object by scraping it

Is there a way to convert an HTML page into a JSON object using web scraping? Here is the content of the page: <html><head><title>Index</title><meta charset="UTF-8"></head><body><div><p>[ <a href ...

javascripthtmljsonnode.js

Ensure that the height of the div element is equal to 100% of

I've been trying to figure out how to make my div take up all of the vertical height of the screen, but I haven't found a simple solution in the 100% div height discussions. Can anyone help? Here's my code: CSS #mother { width: 100%; ...

htmlcssdomheight

Using a local function within Node.js and referencing it with the <%%> tag in a document

I am currently working with Node.js and attempting to utilize a local function within a document that requires the JSON I send in the res.render. Is there a method to achieve this? Below is an example of how I attempted to implement it: <%local_vari ...

javascripthtmlnode.js

The alignment of an inline unordered list is off-center

My website at this link features a sticky navigation bar. However, the list items are slightly misaligned to the left and I'm struggling to pinpoint the cause. Despite adjusting margins and padding extensively, the issue persists. It's important ...

htmlcsstwitter-bootstrapnav

Text in React Native exceeding one line is causing it to extend beyond the screen boundaries

I am having trouble displaying the last messages in my simple contact list as the text is getting cut off the screen. Below is the code I am using: (the readableTimestamp should be positioned behind the text.) View style={{ fontSize: 16, backgro ...

cssreactjsreact-native

Attempting to locate an element using Selenium IDE proves to be challenging unless each command is executed individually

Currently, I am utilizing selenium ide for automating my tests. Once I click on a link, a popup window appears with a div containing text. Strangely, I am unable to retrieve the text within the div tag without either double-clicking on it or executing the ...

htmlseleniumtestingautomated-testsselenium-ide

Eliminate redundant tags using jQuery

I have a code snippet that I need help with. I want to check for duplicates and if found, display an alert stating that it already exists so users can't insert the same word/tag again. Can someone please assist me? <div id="tags"> <span>a ...

javascriptjqueryhtml

Exploration of jQuery Dropdown Menus

Encountering a problem with my dropdown menu. Check out the code here: http://jsfiddle.net/xY2p6/1/ It seems like a simple issue that I can't figure out, but as shown in the link, the functionality is not working properly. I need help linking the hid ...

jqueryhtmlcssdrop-down-menu

Click-triggered CSS animations

Trying to achieve an effect with regular JS (not jQuery) by making images shake after they are clicked, but running into issues. HTML: <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"... JS: function wrongAnswer(){ docume ...

javascriptcsshtmlreveal.js

Is there a way to invoke a client-side function from the server?

Is there a way to display an alert at the top of the browser if the SQL query returns empty results? I tried using the "alert" function, but I'm struggling with customizing its appearance. I have a function in my HTML code that triggers an alert, but ...

htmltypescriptexpress

If the div element contains an <li> element, jQuery animate() will not function properly

Initially, my div was animating perfectly. However, when I inserted a list inside the divs, the animation only became visible once it reached the bottom of the height of the lists. To trigger the animation, click on the Products option in the top menu. T ...

jqueryhtmlcssjquery-animatehtml-lists

I am interested in designing a dynamic wave-themed background for a menu

I am looking to create a menu background that ripples like a wave when hovered over. Check out the first example here: https://i.sstatic.net/LoOWM.png I want to achieve the same effect. Can anyone help me with how I can do this? <ul> <li>likk ...

javascripthtmlcsssvgbootstrap-4

Trouble assigning the 'data' attribute to the 'Object' tag using jQuery. [Limited to IE8]

I have encountered a problem when creating an object element dynamically in jQuery to display some content. The code functions perfectly in all browsers except for IE8. Here is the code snippet: j$(document).ready(function(){ j$('.ob ...

javascriptjqueryhtmlinternet-explorerinternet-explorer-8

To properly document the results, I must utilize a button to record the identification of a specific color

I'm working on a code that creates a clickable box which changes colors from black to green to white by going through different shades of green whenever the mouse is clicked. What I now need to do is implement a feature that displays the current shade ...

javascriptjqueryhtmlcssexcel

Having trouble with less.modifyVars not functioning properly in Visual Studio?

I attempted to dynamically change the LESS variable using HTML within an AngularJS function. The code worked fine on XAMPP with simple HTML and CSS, but when I transferred it to an enterprise app in Visual Studio, it stopped functioning properly. While the ...

javascriptcssangularjsvisual-studio-2012less

The light slider feature is experiencing technical difficulties within the Bootstrap model

I am experiencing an issue with the Light Slider in a Bootstrap modal. Strangely, when I press F12 for inspect element, the Light Slider starts working. For more details and to see the link provided in the comment below, can anyone offer assistance, plea ...

javascriptjquerycss

Show a div pulsating while simultaneously animating another div

After coming across this query on Stack Overflow about adding a class without jQuery if hovering over another class I encountered an issue with a div element that displays upon hovering over a span, which was functioning correctly. However, I also have a ...

htmlcss

What causes <input> elements to vertically center when using the same technique for centering <span> elements? (The line-height of <input> does not match its parent's height)

Important: The height of <div> is set to 50px, and the line-height of <span> is also 50px When 'line-height' is not applied to the <span>, all elements align at the top of the parent. However, when 'line-height: 50px&apo ...

htmlcss

Equivalent of ResolveUrl for loading scripts without the need for server technology

I am in the process of converting an ASP.NET web page into a plain HTML web page. Most of the work is done, however, I am having trouble replacing the ASP.NET Page.ResolveUrl function when setting a reference to a javascript file: <script src="<%= ...

asp.nethtmljavascript

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml