Turn off automatic scrolling on Safari iOS 16 and 15 with single tab functionality enabled

Hey there!

I'm encountering a frustrating issue that's really boggling my mind. When using iOS 15 or 16 with Safari and the "Single tab" setting enabled (which places the Safari search bar at the top), I noticed a strange padding animation when focusing on my input field. Below is a simplified version of my code.

The tech stack I'm using:

  • React
  • SCSS
export const SearchBusinessPage = ({whatInputContent, onWhatChange}) => {
return (
        <div className={classes({ inputContainer: true })}>
            <input
                autoComplete={'off'}
                className={classes({
                    input: true
                })}
                type='text'
                value={whatInputContent || ''}
                onChange={e => onWhatChange(e?.currentTarget?.value || '')}
            />
        </div>
    );
}

And here is the accompanying CSS

.inputContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(to top, #c6ffdd, #fbd786, #f7797d);
    height: 100vh;
    width: 100%;
}

.input {
    flex: 1;
    color: var(--grey-700);
    font: var(--regular) var(--body-3);

    &::placeholder {
        color: var(--grey-500);
        opacity: 1;
    }

    &:focus {
        &::placeholder {
            opacity: 0.5;
        }
    }
}

Looking at my code, nothing seems out of the ordinary. However, I can't seem to figure out how to stop the iOS behavior that adds unnecessary padding on input focus. I've tried multiple solutions but haven't had any luck so far. Any insights or suggestions?

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

Answer №1

After encountering a similar issue, I discovered a surprisingly simple solution that involves utilizing CSS at a high level in the document's object model. While this fix may have some unintended consequences, it effectively resolves the problem.

This approach prevents the Safari user interface from shifting, thus eliminating the issue entirely 🤷

    height: 100%;
    max-height: 100%;
    min-height: 100%;
    width: 100%;
    position: absolute;
    overflow: scroll;

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

Conceal a div once the user scrolls to a certain position using vanilla JavaScript

As a beginner in the field of web development, I am currently working on creating a blog website. Code Function - One of the challenges I'm facing is implementing a floating pagination bar that needs to be hidden when a visitor scrolls near the foote ...

What is the best way to create dynamic cards like the ones displayed here?

I am experiencing an issue with the black box displaying the date. I created it, but it does not adjust properly to different screen sizes. .date { width: 20%; height: 15%; background-color: black; z-index: 1; position: absolute; top: 45%; ...

Facing compatibility problems with JavaScript and Cascading Style Sheets in Google Chrome?

Welcome to the site . Let's address a couple of issues with JavaScript and CSS: Firstly, the JS code seems to be malfunctioning only in Chrome, throwing an error that reads: 'Uncaught TypeError: Object [object Object] has no method 'on prij ...

Is it possible to alter CSS attributes dynamically without setting a limit on the number of changes that can be made?

In my current project, I am looking to add a feature that allows users to choose the color scheme of the software. While the choices are currently limited, I plan to implement a color picker in the future to expand the options available. So far, I have ex ...

React Native has encountered an issue with an undefined object, resulting in an error

I have a JSON file with the following structure: { "main": { "first": { "id": "123", "name": "abc" }, "second": { "id": "321", "name": "bca" } } } Before making an AP ...

Hover over this area to reveal the hidden text as it slides into view

My goal is to hover over truncated text and reveal the full length of the dynamic text. However, I am struggling with removing extra space at the end of shorter text when hovered and displaying all the text for longer ones. I have a solution that almost w ...

Updating the redux state in react by passing a variable from a child component to the parent

I'm currently in the process of updating my Redux state within a component by utilizing a variable that has been passed up to the component from a child, specifically through a form submission callback. The form is responsible for submitting a user&ap ...

Creating a CSS rollover effect for your logo on a WordPress website

Struggling to implement a CSS image rollover on a Wordpress header logo. The solution may be simple for you experts, but I can't find it anywhere on Stackoverflow. Could it have something to do with the position? Adding :relative or :absolute doesn&ap ...

When converting an AudioFile to ExtAudioFile, the ExtAudioFileGetProperty function may encounter difficulties in retrieving

Currently, I am attempting to load an MP3 file into an OpenAL buffer specifically for iOS. To achieve this, I have utilized some code that I borrowed from a sample. Using the following snippet of code: CFURLRef fileURL = nil; NSString* nsPath = [CDUtili ...

PHP: Using conditional statements to adjust datetime formatting for CSS styling

My title may not make sense, as I am new to PHP. I'm trying to create a custom member tag for my forum that shows "X Years of Experience" with different colors based on the number of years. For example, red for under 6 months, blue for year one, yell ...

The data type 'string' cannot be assigned to the type '(url: string) => string'.ts(2322)

I am working with a Material UI copyright component: export default function Copyright(link: string, text: string) { return ( <Typography variant="body2" color="textSecondary" align="center"> {'Copyright © '} <Link co ...

Text alignment and block dimensions

I attempted to organize three buttons within a block. <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/> <div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center"> ...

Highlighting the home page in the navigation menu even when on a subroute such as blog/post in the next.js framework

After creating a navigation component in Next JS and framer-motion to emphasize the current page, I encountered an issue. The problem arises when navigating to a sub route like 'localhost:3000/blog/post', where the home tab remains highlighted i ...

The footer element is missing from the body section of the HTML code, causing the box shadow to not encompass the footer as intended

Having a problem in CSS where the footer is not appearing within the body element in the HTML code. The footer is placed between the body tags, but the box shadow defined for the body is not being applied to the footer. The code snippet below shows the CSS ...

Next.js is perplexing me by throwing an error about Event handlers not being able to be passed to Client Component props, even though the component clearly has "use client" at

My bundler generates a basic React component like this "use client"; "use strict";var a=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,s=Objec ...

WPGraphQL query variables failing to refresh and display new data

I'm attempting to implement a "Load More" functionality on my blog posts page using Apollo/GraphQL/React, and I am diligently following the specific guidance provided here. Nevertheless, after clicking the load more button, no additional posts are loa ...

Leveraging the :checked state in CSS to trigger click actions

Is there a way to revert back to the unchecked or normal state when clicking elsewhere in the window, after using the :checked state to define the action for the clicked event? ...

The Core Data tool triggers alerts from the Analyzer

I am in the final stages of polishing up an app and my main focus right now is eliminating all compiler/analyzer warnings. I have a set of Class methods that encapsulate my application's interaction with Core Data entities. This seems to be triggerin ...

Single-select components in React Native

I am currently working on implementing a simple single selectable item feature, illustrated in the image provided below. https://i.stack.imgur.com/U2rJd.png At this moment, I have set up an array containing my data items and utilized the .map function to ...

Change the position of a Div by clicking on a different Div using JQuery for custom movements

I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. ...