Tips for adjusting the height of the navbar specifically for iOS devices

Hi there! I recently created a navbar at the bottom of my website, and I noticed an issue on iOS where the navbar shrinks as I scroll down in responsive mode. My question is, how can I maintain the height of the navbar when scrolling down, specifically for iOS devices? (The website is built in React)

Here is the code I used for my navbar:

.navbar-footer {
    display: none;
    position: fixed;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 65px;
    background-color: #fff;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
  }
htmlcssiosreactjsresponsive

Answer №1

    @supports (-webkit-touch-callout: none) {
  /* Styles specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* Styles for non-iOS devices */ 
}

This code snippet is effective because only Safari Mobile supports the -webkit-touch-callout property. For more information, you can visit this link.

Note that @supports is not compatible with Internet Explorer, so IE will ignore both blocks above. To learn more, check out this resource. Avoid using @supports not due to this limitation.

But what about Chrome or Firefox on iOS? They actually utilize the WebKit rendering engine, making the above styles applicable across all iOS browsers unless Apple changes their policy. Refer to section 2.5.6 in the App Store Review Guidelines for more details.

Keep in mind that iOS could drop support for these styles in future updates. It's recommended to minimize reliance on such CSS properties. Previously, -webkit-overflow-scrolling was used but got removed in a newer iOS version. You may explore other options by searching for "Safari on iOS" in Supported CSS Properties.

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

What is the syntax for creating a temporary variable within an Angular HTML component?

Can someone help me figure out how to call a function within a loop? Is there a way to store the return value of the function as a temporary variable? I want to use this return value for display purposes. Here is an example of what I am trying to achiev ...

htmlangulartypescriptangular-componentstypescript2.0

The TypeScript error is pointing out that the 'navigation' property is absent in the 'Props' type in React Native, even though it is compulsory

When working with a React Native App, it is important to note that by passing your RootNavigator inside createAppContainer and exporting it, the navigation prop becomes implicitly accessible in all child components. export default createAppContainer(AppNa ...

javascriptreactjstypescriptreact-native

Creating a Multi-Step Checkout System for a WooCommerce Store

Struggling to make my code work - it just won't fire up. I suspect there might be a version-related issue that I'm overlooking. I'm currently using the default checkout setup from the WooCommerce plugin. Instead of buttons, text is showing ...

phphtmljquerywordpresswoocommerce

What is the best way to add permissions to each role in JavaScript?

I have been attempting to dynamically add data to an HTML table using JavaScript. The data consists of roles and their corresponding permissions, which are retrieved using Laravel's ORM. I have tried utilizing a nested each jQuery function to append t ...

javascripthtmljqueryajaxlaravel

serializeArray encounters difficulty in locating certain input elements

I've created this HTML layout: <div class="col-md-12"> <div class="form-group"> <label>Mini description (displaying the latest added destinations and meta description)</label> <textarea class="for ...

javascriptjqueryhtml

Is it possible to center the background button in bootstrap?

Having an issue with the alignment of the + sign on the bootstrap button, it's not centered as shown in this image : https://i.sstatic.net/lxacy.png. Attempted to enclose the button within a div using justify-content-center align-content-center text ...

cssbootstrap-4

Using AngularJS, a single controller is shared between two different views, but the scope is failing to load

I have a website where users can shop online. I want to make it so that when a user removes a product from their shopping cart, the specific sections on the page reload automatically. On my index page, there is a list of products displayed using ng-repeat, ...

htmlangularjscontrollerangularjs-ng-repeatreload

React: Communicate between components and update shared variables on event-triggered actions

As someone fairly new to working with React, I think I may be using the wrong approach to tackle a simple issue. Picture a parent component that contains several child components: OverviewComponent (parent) DetailsComponent (child) EditComponent (child) ...

reactjs

Extracting the value of an attribute from an XML element and converting it into an HTML unordered list with

Here is an example of an xml file structure: <root> <child_1 entity_id = "1" value="Game" parent_id="0"> <child_2 entity_id="2" value="Activities" parent_id="1"> <child_3 entity_id="3" value="Physical1" parent_id="2"> ...

javascripthtmlxmlxslt

Using the ol tag in Google Chrome browser

I'm dealing with an issue regarding a simple ol list in a div: <div class="one">Title<hr width="200px"> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </div> Here's the CSS ...

htmlcssgoogle-chrome

The erratic appearance of inactive elements within ExtJS components

I am currently working on an ExtJS form that utilizes hbox-layout containers to generate sentences containing various form inputs. There is a specific requirement to disable the form under certain conditions. These hbox-layout containers consist of compone ...

cssextjs

Detecting Browser Version Using XML and Javascript

Recently, I created an XML file and attempted to access it using my web browser. It worked perfectly fine in Internet Explorer, but when I tried opening it in other browsers, it failed to function properly. After some investigation, I discovered that the i ...

javascripthtmlxmlcross-browser

"Open Graph tags are being displayed, but not functioning correctly when tested on Facebook's

I am utilizing Next.js along with SSG for page rendering. Take a look at the snippet within the <Head />: <Head> <title>{title}</title> <meta name="title" content={`${title} - MySite`} /> <meta name="de ...

htmlnext.jsseo

Tracking time in seconds and milliseconds with a stopwatch

Greetings! I am currently working on a reaction test to measure how quickly users react, and I seem to be struggling to find the necessary resources. I am curious about creating a basic stopwatch in seconds and milliseconds that can be triggered later by a ...

javascriptjqueryhtmlcss

`Why is the color of the <select> element not changing in Firefox?`

I seem to be facing some difficulty replicating this issue accurately. However, I do have a jsfiddle link where the selected text color does not match the selected option text. http://jsfiddle.net/kralco626/9xJvF/8/ (similar to: seting <select> col ...

htmlcssfirefoxgoogle-chromeinternet-explorer-8

Showing information in a table on a webpage using JavaScript and HTML

After running a console log, I am presented with the following data: 0: {smname: "thor", sim: "9976680249", pondo: "10"} 1: {smname: "asd", sim: "9999999999", pondo: "0"} 2: {smname: "asd", sim: "4444444444", pondo: "0"} 3: {smname: "bcvb", sim: "78678967 ...

javascripthtmlhtml-table

React fails to adhere to the version specified in the package.json

Within my package.json file, I have indicated the react version as "react": "^16.13.1" Upon executing npm install to install the dependencies, I notice that when I proceed with npm run start, the project is compiled using the react ver ...

reactjsnpm

Is it possible to achieve N-level zebra striping with CSS3 selectors?

The .less file for .list-striped is set up with a basic zebra striping pattern. It even works for nested lists by reversing the selectors to avoid duplicate styling of parent and child list items. However, we are looking to extend this functionality to N ...

htmlcssrecursionzebra-striping

Steps for correctly displaying a success message after clicking and copying to the clipboard:

In the process of developing a color palette, I am incorporating a clipboard icon enclosed in a Tooltip component alongside each color. The functionality involves copying the color's name to the user's clipboard upon clicking the icon. Subsequent ...

javascriptreactjsmaterial-uifrontendhtml5-clipboard-api

Efficiently locate records in SQLite on iOS for optimal performance

I'm in the process of creating a Scrabble game and need to validate words against a word dictionary. Initially, I loaded the dictionary into an array and performed a binary search for validation. However, I have now switched to using SQLite to avoid ...

iosobjective-csqlxcodesqlite