Challenges arising from CSS position: fixed on iPhone 6+ in landscape orientation running iOS 9

Encountered a strange issue with the fixed header on my website under specific conditions:

  1. Using an iPhone 6+ in landscape mode.
  2. Using Safari with at least two tabs opened.
  3. The page has a fixed position header with html and body set to position: relative, height: 100%.

After the page loads, scrolling down works fine. The header remains in place and is displayed correctly in the web inspector:

https://i.sstatic.net/u11nd.jpg https://i.sstatic.net/Jqh6H.jpg

However, when you scroll up, pull the page down, and release, the header appears to be visible on the page but is actually shifted below the viewport (not highlighted in the web inspector).

https://i.sstatic.net/LQOdl.jpg

This causes all header elements to be inaccessible – menu, logo, contact button cannot be clicked.

The header returns to normal when:

  1. You scroll down (but breaks again when scrolling back up).
  2. Switching to another tab and returning.
  3. Closing other tabs.

I have tried adjusting the DOM and CSS of the header and body, but nothing seems to restore the header to its normal state. Any suggestions on how to fix this?

ioscssmedia-queriesiphone-6-plus

Answer №1

Unfortunately, I bring you unwelcome news without specifics about your issue. It appears that the problem lies with the position:fixed attribute not functioning as intended. A potential solution could involve refraining from utilizing position:fixed. Consider an alternative approach using absolute and relative positioning to achieve a similar effect:

<html id="eHTML">
<style>
#eHTML { position: static }
#eBODY { position: relative; overflow:hidden }
#eHTML, #eBODY, #main { width: 100%; height: 100%; margin: 0; top: 0 }
#eBODY>div { position:absolute; left:0;bottom:0 }
#footer {height: 20%;background-color:#88f;width:calc(100% - 14px)/*to account in for 14px scrollbar*/;overflow:hidden}
#main {background-color:#ff8;width:100%;height:100%;overflow:auto}
</style>
<body id=eBODY>
<div id=main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

... (remaining HTML code truncated for brevity) ...

<br /><br /><br /><br />
</div>
<div id="footer">
Some Random Fixed<br />
Content! Yay, it workz!
</div>
</body>
</html>

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

Spring Boot application on Prime Faces is not displaying CSS after deployment to Heroku

I'm currently using a combination of Spring 3.1.3, Prime Faces 3.4.2, Hibernate 3.6.8, and Pretty Faces 2.0.4. When I deploy my application on a local server (Apache Tomcat 7), the CSS displays properly. However, when I deploy the same project to Her ...

javacssspringherokuprimefaces

Using jQuery to create a dynamic fullscreen background image that responds to mouse movement

I am currently working on creating a dynamic full screen background that responds to the movement of the mouse. The idea is that as you move the mouse around, the background image will shift accordingly. For instance, if you were to move the mouse to the ...

jquerycssbackgroundviewport

How to troubleshoot Javascript code that fails to identify if a color is white

What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...

javascripthtmlcss

Reveal unseen information on the webpage upon clicking a link

I have successfully implemented a fixed header and footer on my webpage. The goal is to make it so that when a user clicks on a link in either the header or footer, the content of that page should appear dynamically. While I have explored various styles, ...

javascriptjqueryhtmlcss

What is the best way to prevent a function from being executed until a screen touch occurs?

When the app launches, I want to have an object on screen right away. However, I also want to randomly start placing more of that same object after a touch event is registered. I've tried incorporating this functionality into my touches began method, ...

iosiphonexcodeswift

Using jQuery sortable with the overflow property set to hidden to sort items between two lists

I need help with a jQuery sortable feature where I have two lists and can move items between them: $( '#productsList, #orderList' ) .sortable({connectWith: '.containerDiv'}) .disableSelection(); My issue arises when I try to implement ...

javascriptjqueryhtmlcss

What is the reason behind the functionality of inline-block?

As a beginner in html and css, I am facing an issue with displaying two h3 elements on the same line. I have tried using display:inline-block, but it's not working as expected. You can check out an example on jsfiddle here. I have provided 4 different ...

htmlcss

Exploring the integration of mixins from .scss files within node_modules into our .tsx or .jsx files for enhanced styling

I am currently facing a challenge with importing a .scss file from one of the installed node_modules into my .tsx file. The scss file contains a mixin named @mixin make-embedded-control($className: embedded-control){.....} which has all the necessary css ...

cssreactjssassscss-mixins

"Is there a way to align a span element on the same line as an h

I'm attempting to align a text-number (span) next to an entry-title (h2) on the same line, with the entry-meta block on the following line, including having the reading time float left. I could use some help with my CSS implementation. Thank you. Ex ...

htmlcss

Creating a new element in jQuery and placing it at the position where an element has been dragged

I need assistance with ensuring that each new item is added in the same position, regardless of any previous repositioning due to dragging. Currently, only the first appended item appears where I want it to be. Can someone please offer guidance? $("#butto ...

jquerycss

Experiencing challenges during the creation of a NUXT build

Trying to build a Nuxt SSR app, but encountering an error related to the css-loader during the build command execution. The issue seems to be with Invalid options object. ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./no ...

cssvue.jswebpacknuxt.js

Limit image size in Outlook when using Mailchimp

I'm currently working on coding a Mailchimp template for a client and I've run into an issue with image dimensions. The problem arises when images exceed the width of the template (usually 600px), as they are displayed at their original size in ...

htmlcssimageoutlookmailchimp

Tips for reactivating a disabled mouseover event in jQuery

I created an input field with a hover effect that reveals an edit button upon mouseover. After clicking the button, I disabled the hover event using jQuery. However, I am unable to re-enable this hover event by clicking the same button. Here is the code s ...

javascripthtmljquerycss

Creating a grid layout similar to Tumblr using HTML and CSS

Struggling all day to figure out how to create a Tumblr-style grid for my website, I'm reaching out here for some assistance. Here is the page: I have a grid of images on my project page that initially looked fine, but as I try to add new elements, i ...

htmlcssimagegrid

The behavior of -webkit-border-radius differs from that of -moz-border-radius

My website is displaying differently on Safari compared to Firefox. I want the CSS to make it look consistent across both browsers. I understand that I could use two div boxes - one for the outline and one for the image. However, I prefer how Firefox only ...

safaricss

Excessive spacing issues arise while adjusting CSS height, leading to undesirable vertical scrolling

One of the features of my website is a post section where users can leave comments. These comments are displayed at the bottom of the post. To enhance user experience, I decided to create a modal for posts using HTML and CSS as shown below. However, I enc ...

jqueryhtmlcss

Adjusting and arranging multiple thumbnail images within a container of specific width and height

I need a user-friendly method to achieve the following. The thumbnails will not be cropped, but their container will maintain a consistent height and width. The goal is for larger images to scale down responsively within the container, while smaller image ...

javascripthtmlcss

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

cssvue.jsvuetify.js

"Looking for a way to eliminate the background of an image on NextJS? Learn

https://i.stack.imgur.com/zAsrJ.png When this image is incorporated into a Nextjs rendering, it unexpectedly includes additional content. <div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3"> <div cla ...

javascriptcssreactjsnext.jstailwind-css

css avoiding code duplication with nested classes

I created a custom CSS class named button.blue: button.blue { background-color: blue; ... } button.blue:active { background-color: darkblue; ... } button.blue:hover { background-color: lightblue; ... } To implement this class, I use the following code: ...

css