Is it normal that my website isn't scrollable on an iPhone?

I have a hunch that the issue is related to the CSS, or perhaps it could be due to including the parallax JavaScript library.

You can view the site at

Below is the SASS code snippet:

@import "compass/css3";
/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  padding-top: 0;
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

<!-- More CSS code snippets here -->

Here's the Coffeescript snippet that handles scrolling to fix the menu bar at the top of the screen:

$ ->
  <!-- Coffeescript function for handling scroll behavior -->

Currently, I'm having trouble with the scrolling functionality. It works fine when I scale down the webpage on my computer, but not otherwise. Additionally, the menu bar doesn't expand as expected in mobile view. Any insights into what might be causing these issues would be greatly appreciated!

Answer №1

It appears that the scrolling problem may be due to a missing #skrollr-body id on one of the elements in your mobile page. Ensure that it is included and has a minimum height. Refer to the Skrollr documentation for more information.

Regarding the menu button, there doesn't seem to be an event listener attached to your toggle. You need to add a click/touch event to apply and remove the toggling classes.

It's worth noting that this issue applies to any mobile device width, not just iOS or iPhones. I was able to replicate the problem on Chrome desktop as well.

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

Which is Better for Creating DropDown Menus: CSS or JavaScript?

Starting a new project that involves dropdown menus with categories and subcategories within them. I'm curious about the advantages of using CSS3 only menus compared to traditional JavaScript ones. There are several jQuery menu options available as we ...

The primary HTML file in Angular is unable to access the styles.scss file located in the src/styles directory

Just starting out with Angular. To incorporate the 7-1 scss pattern into my project, I established a styles folder within the src directory named "src/styles", and connected the components to the src/styles/style.scss file successfully. However, I'm ...

A straightforward guide on utilizing data-attributes to achieve a linear-gradient background

considering the following input .prettyRange { -webkit-appereance: none; } .prettyRange::-webkit-slider-runnable-track { background: -webkit-linear-gradient(right, #fff 0%, green 50%, #fff 0%); } <input class="prettyRange" type="range" name="cap ...

What is the purpose of applying the two unique class names (root and disabled) to the DOM in order for it to function correctly?

When it comes to customizing components using material-ui, the process can be a bit tricky. Here's how you can do it: const styles = { root: { '&$disabled': { color: 'white', }, }, disabled: {}, // This is i ...

Could someone please provide guidance on customizing the appearance of bs5-lightbox?

Looking for some assistance here from the experts :) Currently, I'm utilizing Bootstrap 5 along with this Lightbox library called To activate it, I'm using data-toggle="lightbox" and it's functioning flawlessly. <a href=&quo ...

Adjust Scale to Less than 1 in JVectorMap

I am in the process of developing a website that includes a full-size map using JVectorMap. The map currently occupies 100% of the width and height of the page, but I would like to add a border around it when fully zoomed out. However, when the map is zoom ...

I am in search of a clean and efficient method to modify the class of a link that triggers an HTMX request in Django. Perhaps something like "auto-refresh" or a similar solution would be ideal

I've encountered an issue with HTMX in Django. The page consists of two main components: a list of categories and the content that is displayed when a category is clicked. Initially, everything was working smoothly with standard htmx functionality. H ...

Animation not fluid with ReactCSSTransitionGroup

Currently, I am in the process of developing an image carousel that showcases images moving smoothly from right to left. However, despite its functionality, there seems to be a slight jaggedness in the animation that I can't seem to resolve. Interesti ...

Tips for preventing line breaks within table cells

Looking at the image below, I need to display the Hallticket in a single line. The first one is retrieved directly from the database, while the second one is added dynamically using JavaScript. How can I show both sets of data in a single line? <td&g ...

Keep track of the toggled state and prevent any flickering when the page is reloaded, all without the

After extensive searching, I couldn't find exactly what I needed. Therefore, I decided to utilize cookies to remember the toggled state of a div whether it's hidden or visible. However, I encountered an issue where there is flicker happening as t ...

Arranging input elements horizontally

this issue is connected to this post: Flex align baseline content to input with label I am grappling with the layout of my components, specifically trying to get all inputs and buttons aligned in a row with labels above the inputs and hints below. The CSS ...

What is the best way to set breakpoints on Material UI components?

Currently, I am exploring material-ui and I'm curious if there is a way to set all breakpoints at once. The code snippet below seems quite repetitive. Is there a more efficient method to achieve this? <Grid xs={12} sm={12} md={12} lg={12} xl={12} ...

Change from full manual control to automatic mode

Here is the link to my code: http://jsfiddle.net/yHPTv/2491/ I am experiencing an issue with the transition effect. The hidden element is supposed to slide into view from the right edge of the .block element, but instead, it just appears suddenly. .blo ...

Determining the Size and Color of Squares in a Treemap Based on Content with D3.js

I encountered an issue with a treemap visualization. I came across an example that is similar to my situation, which can be viewed here: In the demo, you can see that the size of each square in the treemap is determined by the content size. However, all s ...

Fine-tuning the flexbox grid layout for various screen sizes, both big and small

Two different layouts were created. The first layout is designed for medium & large screens, while the second one is tailored for devices with a maximum width of 736px. Check out the vanilla implementation using flexbox (without mobile adaptation) Here ...

Issue with Bootstrap grid borders

I am currently working on a grid system that displays flight information in 10 columns, with a select button and price in 2 columns. I am facing an issue where adding a border to separate the select button section from the rest of the flight information on ...

Issues with npm-packages that are installed globally causing them to not work properly

I've encountered an issue where globally-installed npm packages are not working as expected. There are no errors thrown, but packages like express and coffee-script simply do not run. This problem became more pressing when I needed to use coffee-scri ...

Adding the header.php file in WordPress caused the style.css to stop working

Whenever I include a basic "header.php" file in my theme directory, my style.css mysteriously stops working. But when I remove the "header.php" file, everything goes back to normal. How can I troubleshoot this issue? Below is the code snippet from my fil ...

Modifying the background color using highcharts.js

I am attempting to customize the background colors of a highcharts scatter plot. While I can easily change the color of a specific section using the code provided, my goal is to apply multiple colors to different ranges within the same plot. Specifically, ...

Place the delete and edit buttons on the right side of the card

I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this: https://i.sstatic.net/sNikU.png ...