New feature allows for smooth scrolling of fixed position footer on iPhone X

Question

New feature allows for smooth scrolling of fixed position footer on iPhone X

I recently developed a hybrid HTML5 app using the Trigger.io framework. The app features a fixed footer and a scrolling content area which function properly on most devices, except for the iPhone X. When scrolling on the iPhone X, I noticed that the footer actually moves out of view slightly.

Here is how the app appears with the footer in view:

https://i.sstatic.net/UMGnE.png

However, as soon as I begin scrolling down, the footer disappears and only reappears when scrolling back up.

https://i.sstatic.net/YGnbQ.png

Although I have implemented optimizations for the iPhone X notch in the design, the issue of the footer scrolling remains unresolved.

Since my app is built using a hybrid framework, the interface is constructed using HTML + CSS rather than native UI components.

Any insights into why the footer might be behaving this way specifically on the iPhone X?

html ios css iphone trigger.io

Answer 1

Answer №1

If you're looking to prevent an element from scrolling within a scrollable container, one option is to place the said element outside of the scrollable area and use CSS to fix its position. For example:

<div id="scroll-container">
  <div id="scrollable">
  </div>
<div>

This setup will ensure that any content within the #scroll-container will scroll while elements in the "not-scrollable" portion remain fixed in their position.

By applying position:fixed;, position:absolute;, or position:sticky; in the CSS for #not-scrollable, you can prevent it from scrolling along with the rest of the content. However, keep in mind that this will make the element relative to its parent container (in this case, the body tag) rather than the scrolling container.

If your goal is to customize the layout specifically for devices like the iPhone X, there are resources available online that provide guidelines on optimizing websites for such screens. Feel free to explore these suggestions and adapt them to suit your needs!

Answer 2

If you're looking to prevent an element from scrolling within a scrollable container, one option is to place the said element outside of the scrollable area and use CSS to fix its position. For example:

<div id="scroll-container">
  <div id="scrollable">
  </div>
<div>

This setup will ensure that any content within the #scroll-container will scroll while elements in the "not-scrollable" portion remain fixed in their position.

By applying position:fixed;, position:absolute;, or position:sticky; in the CSS for #not-scrollable, you can prevent it from scrolling along with the rest of the content. However, keep in mind that this will make the element relative to its parent container (in this case, the body tag) rather than the scrolling container.

If your goal is to customize the layout specifically for devices like the iPhone X, there are resources available online that provide guidelines on optimizing websites for such screens. Feel free to explore these suggestions and adapt them to suit your needs!

Answer 3

Answer №2

In my experience with previous web projects, I have successfully used the position:sticky; property in most cases. It's a helpful feature that tends to work well. If you're curious about browser compatibility, you can check out this link: Can you use position sticky?

One trick I had to implement for FireFox and iOS Safari was wrapping the entire content in a <div>. This included fixing elements like headers and footers. I discovered that these fixed/sticky elements are relative to their parent container, so once the parent ended, the fixed/sticky behavior would break and cause bugs.

If this simple workaround doesn't solve your issue, I recommend following the advice given by @RandomChannel.

Answer 4

In my experience with previous web projects, I have successfully used the position:sticky; property in most cases. It's a helpful feature that tends to work well. If you're curious about browser compatibility, you can check out this link: Can you use position sticky?

One trick I had to implement for FireFox and iOS Safari was wrapping the entire content in a <div>. This included fixing elements like headers and footers. I discovered that these fixed/sticky elements are relative to their parent container, so once the parent ended, the fixed/sticky behavior would break and cause bugs.

If this simple workaround doesn't solve your issue, I recommend following the advice given by @RandomChannel.

Answer 5

Answer №3

 <div class="container">
    <div class="scrollable-section">
    // scrollable content
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    </div>
    <div class="fixed-footer">
    // fixed footer
    </div>
</div>

// CSS

.container {
 height: 100vh;
 position: fixed;
 }
.scrollable-section {
 height: 95vh;
 overflow-y:auto; 
 border: 1px solid #000;
}
.fixed-footer {
 height: 5vh; 
position: fixed; 
width: 100%; 
}

Answer 6

 <div class="container">
    <div class="scrollable-section">
    // scrollable content
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    Let's insert some text hereLet's insert some text here
    </div>
    <div class="fixed-footer">
    // fixed footer
    </div>
</div>

// CSS

.container {
 height: 100vh;
 position: fixed;
 }
.scrollable-section {
 height: 95vh;
 overflow-y:auto; 
 border: 1px solid #000;
}
.fixed-footer {
 height: 5vh; 
position: fixed; 
width: 100%; 
}

Answer 7

Answer №4

Suggesting a solution using JQuery

Styling with CSS

body
  margin: 0

#CustomClassOrID
  height: 10em // adjust as needed
  width: 100%
  //background-color: red
  position: absolute // or fixed

JQuery Implementation

resize = () => {
  var obj = $(document)
  docWidth = obj.width() //Not necessary
  docHeight = obj.height()
  $("#CustomClassOrID").css({
    top: docHeight - $("#CustomClassOrID").height()
  })
}

$(window).resize(() => {
  resize()
})

resize()

Answer 8

Suggesting a solution using JQuery

Styling with CSS

body
  margin: 0

#CustomClassOrID
  height: 10em // adjust as needed
  width: 100%
  //background-color: red
  position: absolute // or fixed

JQuery Implementation

resize = () => {
  var obj = $(document)
  docWidth = obj.width() //Not necessary
  docHeight = obj.height()
  $("#CustomClassOrID").css({
    top: docHeight - $("#CustomClassOrID").height()
  })
}

$(window).resize(() => {
  resize()
})

resize()

Answer 9

Answer №5

Avoid using the fixed position in CSS. Instead, experiment with the translateZ() CSS function, which can reposition an element on the z-axis in a 3D space, moving it closer or further away from the viewer. This function produces a data type known as <transform-function>.

Take a look at this HTML snippet:

<div>Static</div>
<div class="moved">Moved</div>

And here's some CSS code:

div {
  position: relative;
  width: 100px;
  height: 1000px;
  left: 200px;
  background-color: black;
}
.moved {
  transform: perspective(400px) translateZ(180px);
  background-color: red;
}

Answer 10

Avoid using the fixed position in CSS. Instead, experiment with the translateZ() CSS function, which can reposition an element on the z-axis in a 3D space, moving it closer or further away from the viewer. This function produces a data type known as <transform-function>.

Take a look at this HTML snippet:

<div>Static</div>
<div class="moved">Moved</div>

And here's some CSS code:

div {
  position: relative;
  width: 100px;
  height: 1000px;
  left: 200px;
  background-color: black;
}
.moved {
  transform: perspective(400px) translateZ(180px);
  background-color: red;
}

New feature allows for smooth scrolling of fixed position footer on iPhone X

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Unable to display a mesh using THREE js

Rendering High-quality Images in Internet Explorer Browser

Causing a 404 error with Htaccess RewriteRule and parameters

Can JavaScript and CSS be used to dynamically style textarea content as it is being typed by the user?

Learn how to incorporate a consistent header and footer across multiple pages on a website with Node.js, ExpressJS, and either hbs or ejs templates

Ways to compel links to open in Internet Explorer

What is the best way to link my PHP variable to a JavaScript variable within a While loop?

Achieving equal height in Bootstrap columns

Unable to remove the layers of uncertainty to reveal the contents. No table view cell

Create an array of subarrays in NSMutableArray where every pair of objects is grouped together, with a blank string included at

Internet Explorer 9 fails to recognize angular objects when used inside ngRepeat

Unable to set the max-height to 100% on textarea in CSS

What is the best way to combine two rows within a single cell using HTML?

Transform URL Structure with UrlRewrite and htaccess - A Step-by-Step Guide

Issue with binding background images to DIV elements in Angular 4 CSS

The expected behavior of flex shrink is not being achieved when the flex direction is set to

What techniques can be employed to create a fully operational web application using AngularJS?

Having a fixed bottom line bar that does not affect the length of the div when

Split a column into two at the md breakpoint with Bootstrap

Firefox and Opera not affected by pointer-events on scrollbars