iOS Safari bounce causing fixed header to disappear

Latest findings:

https://i.sstatic.net/1b5g2.gif

Predicted outcomes:

https://i.sstatic.net/Kl3w6.gif

If you own an iOS device, you can view a real-life example at client.wildfyre.net

Any suggestions on how to resolve this issue?

Snippet of the Code:

    #topNav {
      height: 50px;
      margin: 0 auto;
      background-color: #263238;
      color: white;
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      z-index: 5;
    }

    #topNavMenu {
      position: fixed;
      right: -20px;
      top: 7px;
    }

Answer №1

First and foremost, it is crucial to identify the root cause of the issue.

https://i.sstatic.net/pzW8J.gif

To eliminate the scrolling effect, simply remove the 'mat-drawer-content' class along with the inline transition styles.

If you still desire the scrolling effect without encountering this problem, there are two possible solutions:

  1. Reposition the <nav> as a sibling rather than a child of the 'mat-drawer-content' div to prevent the transition from affecting the <nav> tag.

Alternatively,

  1. Apply the property overflow: hidden on the 'mat-drawer-content'. https://i.sstatic.net/NdX84.png

I have personally tested both methods on an actual device and can confirm that they are effective. See the attached screenshot taken from an iPhone X for reference. https://i.sstatic.net/s3QMe.jpg

Answer №2

After thorough debugging, I have come to the conclusion that the only solution is to relocate the nav tag along with its contents. It is crucial not to move any other nav tags except for the specific one - leave the red ones where they are and move the blue one upwards.

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

<nav aria-label="Navigation links" class="mat-tab-nav-bar mat-primary" id="topNav" md-tab-nav-bar=""></nav>

Moving the nav tag outside of that div:

<div cdk-scrollable="" class="mat-drawer-content" style="margin-left: 0px; margin-right: 0px; transform: translate3d(0px, 0px, 0px);">

Once the nav tag is placed outside the div with class="mat-drawer-content", everything should function smoothly. The issue lies in the fact that this particular class causes a movement of the entire component when scrolled, thus leading to the problem.

Answer №3

After some investigation, I discovered that the issue lies with the CSS overflow property in the .mat-drawer-content class. By either removing the overflow: auto; declaration or changing it to hidden, the bug can be resolved in Safari iOS. I double-checked across different browsers and platforms, and it seems that removing this property does not impact anything else.

I hope this solution proves useful!

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

Next.js endeavors to interpret MDX files as basic JavaScript code

Currently, I'm in the process of creating a website using Next.js and incorporating (local) MDX files for my content. However, I've encountered an issue where whenever I add a .MDX file to my source tree and attempt to navigate to it, Next.js thr ...

Designing a website's layout with HTML and CSS

I am having trouble developing a concept depicted in the image below. Here is what I have accomplished so far: https://jsfiddle.net/o0zmtr3q/2/. I am struggling to make each box unique, especially with the layout where the text is positioned differently in ...

Ways to verify the timeframe between two specific dates

Having two distinctive arrays: accomodation: [ { id: 1, name: "Senator Hotel Fnideq", address: "Route de Ceuta, 93100 Fnidek, Morocco", checkin: "September 1", fullCheckinDate: "2021-09-01", ...

Unable to process JavaScript function

Still in the process of developing my "mvc/social" PHP project, I am currently focusing on securing user input for the status message. I have created both a PHP and JavaScript function for this purpose, but it seems like the JavaScript function is not bein ...

Trouble with Vue bootstrap's <b-modal> function not triggering on @click event

Instead of passing props to the <b-modal> buttons, I want to directly call signinUser() method on @click in my modal when clicking the default OK button. However, the modal doesn't seem to respond to this. The signinUser() method will trigger o ...

Objects beyond a distance of 1 unit start to vanish when employing ArrayCamera

After implementing an ArrayCamera to wrap my PerspectiveCamera, I noticed that objects located more than 1 unit away from the origin point (0,0,0) appear to vanish in the render. var camera = new THREE.PerspectiveCamera(); camera.viewport = new THREE.Vecto ...

Switching between playing and pausing on multiple audio tracks

I have a collection of audio files with custom play/pause buttons that I've implemented. Each audio file is assigned a dynamic class, such as custom-aud-0, custom-aud-1, custom-aud-2, and so on... Here is my toggle function: togglePlay(c, index) { ...

Is it necessary to always include all styles for jQuery UI separately in my project?

While reading various articles, I have noticed a common suggestion to explicitly bundle each jQueryUI .css file, such as the answer provided on How to add jQueryUI library in MVC 5 project?. However, upon examining the .css files within the Content/themes/ ...

Why is it necessary to click my dropdown two times to initiate opening?

I'm currently working on a website using Bootstrap 4.3.1 and I'm facing an issue with getting the dropdown menus to open properly. I have utilized the "dropdown" class within my div. <div class="dropdown" style="float: right;"> <but ...

Having trouble loading my Angular 2 application on Plunker correctly

Link to Plunker 1 encounters an issue with the following error message: zone.js:323 Error: Error: XHR error (404 Not Found) loading http://run.plnkr.co/XaKTrrlcPIlCBySj/node_modules/rxjs/index.js(…) Link to Plunker 2 is facing a different error: angul ...

Determine the total value derived from adding two option values together

I am attempting to calculate the sum of two select options and display the result. So far, my attempts have only resulted in returning the value 1. What I am aiming for is to add the values from n_adult and n_children, and then show the total under Numbe ...

During the next build process, there seems to be an issue with getStaticPaths and getStatic

I am encountering a problem with my Next.js Application that utilizes a [slug] for Static Site Generation. Everything works perfectly fine on my localhost, but when I try to deploy it, I encounter the following error: “Unhandled error during request: Ty ...

How come setting an optionsValue causes Knockout updating to malfunction?

As I delved into the Knockout tutorials, one particular tutorial caught my attention. Here is the HTML snippet that puzzled me: <h2>Your seat reservations</h2> <table> <thead><tr> <th>Passenger name</th& ...

The page keeps refreshing repeatedly

Can someone help me troubleshoot this url modification script? var currentPath = window.location.href currentPath=currentPath.replace(/&amp;/g, "&"); window.location.href=path; It seems like the page keeps reloading endlessly... Any sugg ...

What is the best way to export assets into a React Native JS file?

After watching a video on YouTube, I noticed that at 3:20 the individual in the video quickly exported multiple assets into a file without providing any explanation. Can someone please view this specific moment in the video and clarify how this person mana ...

jQuery AJAX: SyntaxError caught due to an unexpected token

I want to dynamically change the content of my div when a user enters text into the search textbox: $('#business_request_filter_search_textbox').on('input propertychange paste', function () { $.ajax({ url: "/ajax/housekeepi ...

Issue with jQuery fadeTo() not working after appendTo() function completes

I am facing a problem with the code below that is meant to create a carousel effect for my website. The main issue I am encountering is that the original fadeTo() function does not actually fade the elements, but rather waits for the fade time to finish an ...

Removing duplicate data from Table TD and TR elements using Jquery

I am working on an HTML table and I need to remove duplicate values in each <tr> and <td> data cell. Here is a snippet of my code: <table width="100%" id="l2table"> <thead><tr> ...

What is the best way to transfer data between my express middleware functions?

Hello, I am new to working with Javascript/Node/Express and currently trying to interact with the Facebook Graph API. Below is an Express middleware function that I have set up: My goal is to follow these steps: Acquire a user authentication token fro ...

Presenting information extracted from the Meteor 1.0 framework

At the beginning of my Meteor application, I import data from a JSON file using the following code: 13 if (Meteor.isServer) { 14 15 //startup 16 Meteor.startup(function () { 17 if(Plugins.find().count() === 0) { 18 var plugins_data = J ...