Spacing for input placeholders on mobile safariIs there a gap for

UPDATE: Check out this minimum reproducible bug. Detailed instructions on how to run the code are in the readme file.

Experiencing an issue with the bottom padding below an input placeholder specifically on mobile Safari. Below is a comparison of how the input placeholder appears on mobile Safari versus Chrome:

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

Chrome's Display:

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

Notice the noticeable difference in spacing between the placeholder text and the bottom border.

Tried adjusting the line-height as recommended by some Stack Overflow responses, as well as modifying the padding-bottom on the ::placeholder with various vendor prefixes... Browsed extensively to no avail for other potential solutions.

Answer №1

To avoid browser inconsistencies, it is best to refrain from using the line-height property for inputs and buttons. Instead, consider utilizing height and padding to achieve the desired size of elements. In instances like this, replacing line-height with margin should be adequate.

Answer №2

It can be challenging to provide a solution without reviewing the actual code. One option to consider is adding a margin-bottom to the top object or a margin-top to the input field. To target this adjustment specifically for Safari browser, you may need to include a conditional statement within the CSS. For more information on this approach, you can visit the following link: is there a css hack for safari only NOT chrome?

There seems to be an underlying issue causing this discrepancy. I once encountered a similar problem related to slight variations in float positioning between browsers, resulting in grid misalignment. Resolving it involved assigning fixed values to all objects: width and height. Upon closer inspection, I noticed that the distance between the pencil and California on the top image appears different compared to Chrome.

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

Can JQuery be used to retrieve the name of a color?

After extensive searching, I have come up empty-handed in finding a suitable solution to my problem. On my webpage, I have a select tag with all colors listed as shown on this link. In the midst of my code, I attempted to apply color using a jQuery plugin ...

What is a more sophisticated approach to adding css to "every element except this one"?

I am currently using html/jQuery to create tabbed navigation on my website. I have managed to make the selected tab appear active by adding a CSS class "active" and changing the previous tabs to have an "inactive" class. In order to achieve this, I have in ...

Tips for applying various classes using ngClass to enable an animation when a value changes compared to when that value is true when the page first loads

I need some help with a coding issue, could someone assist in making my question clearer? I'm working on creating an animation that triggers when the value of an object changes. I used ngClass to assign a class to an element based on the object' ...

Is custom CSS selector disregarded by Internet Explorer?

Internet Explorer is giving me a headache. This is the CSS code I'm using: kl { font-size:10pt; font-weight: bold; color:#6e90a6; } And here is my HTML code: <div id="testid"><kl>test</kl> Why is Internet Explorer no ...

Changing the background image of a specific div using CSS and JavaScript: a beginner's guide

I've been attempting to modify the background of a div in HTML using JS and CSS. Below is the code I've tried, but it doesn't seem to be working as expected. function changeBackground(previewPic) { var imgUrl = previewPic.src; conso ...

Tips on finding an error message within the website's developer options when the inspector fails to locate it

I'm dealing with a website at On this site, there's a 'get latest blog posts' field that I want to automate the error message for. When I input an invalid email address like test123.com, I receive an error response but can't find ...

Enhance your Material UI Button with Advanced Text Alignment Options for Compact Screens

As a beginner in React and Material-UI, I'm attempting to customize a set of buttons within my app bar with background images for a cleaner look. Drawing inspiration from various online examples, I've managed to style them to my liking on larger ...

Utilizing jQuery for AJAX requests triggered by mouse movement

I have a project where I am creating an image with gdimage, consisting of 40000 5x5 blocks that link to different user profiles. My goal is to implement a feature where hovering over one of these blocks triggers AJAX to fetch the corresponding user profile ...

How can I make a div move to the position of another div and stay with it when the screen is resized?

In my card game project, I am dealing with an issue where cards are not aligning properly with the designated "dropZonePositions" when the screen is resized. Despite creating animations for the card movement that I'm satisfied with, the problem arises ...

transfer data from one HTML page to another through the database

I have an HTML page in Flask that pulls applicant information from a SQLAlchemy database. I would like to be able to click on an applicant's name on the first page and have another page open with specific details for that applicant. While I was succe ...

Issue with Element Height Rendering in Chrome

I'm having trouble adjusting the height of the Div in this theme to 156px. It seems to be inheriting a CSS property from another source which is setting it to 118px instead. Please visit the following website in Chrome and Firefox to see the differe ...

Is there a way to partially conceal the H2 text using CSS?

Is there a way to partially hide H2 text using CSS? I have the following code: HTML: <div class="twocol-box1 superflex-content-6-12"> <h2 data-content="My - Text&amp;nbsp;<span style=&quot;float:right;&quot;>M ...

Fetching data using HTML script is not possible

Struggling to retrieve data from mongoDB and send it to the client side using res, but I keep getting undefined. Can anyone offer some assistance? Thank you all! //// server.js app.get('/user/show', userController.userList); //// controller cons ...

What is the best approach for testing an HTML element that does not have distinct attributes?

Currently, I am utilizing Coded UI Test to conduct tests on a web application. In my workflow, I rely on a class called Locator to store specific information necessary for CUIT to locate a control. When it comes to interacting with a control, a page objec ...

Can passing parameters between nested map functions cause any issues?

While attempting to navigate to a page in reactjs and pass parameters using the useNavigate hook, I encounter an unexpected token error as soon as I include the navigation within the anchor tag. <a onClick={() ={ ...

Rearrange the boxes in html and css when resizing the window

I'm curious if it's possible to rearrange the boxes when the window size is reduced. Currently, they are displayed like this: Big window But when I shrink the window, it looks like this: Small window What I would like to achieve is to have th ...

Displaying HTML code through Alert() is a convenient way to showcase snippets of

Can alert() or another pop-up be used to show actual HTML code? For instance, the following code snippet: var range = selection.getRangeAt(0); var newNode = document.createElement('span'); newNode.setAttribute("class", "selectedText"); range.sur ...

Create a collapsible menu using only CSS that expands when the down arrow is clicked, specifically designed for

I am currently working on creating a mobile-friendly version of a menu. I have a list of items, and I want only the item with the class nav-current to be displayed initially. Using pseudo :after, I added an arrow after the link of that specific li element. ...

Prevent overlapping of range sliders in HTML and CSS

I have designed a range slider with two buttons, but they are overlapping each other. I want to ensure that they do not cross over one another - where the value of the first button should be equal to the minimum value of the second button, and the maximum ...

Is there a way to substitute the bootstrap in order to accomplish the same goal?

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title> Home - Hasan's Website </title> <style> body, ...