CSS - Issues with transition smoothness on Safari

I am facing an issue with a simple font-size transition in Safari, causing stuttering while it works smoothly in Chrome and Firefox. I'm not sure if this is a Safari problem, a Webkit issue, or something else entirely. Any workaround suggestions would be greatly appreciated.

input {
  font-size: 1vw;
  transition: font-size 0.4s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  outline: none;
}
input:focus {
  font-size: 1.2vw;
}
<input type="text" placeholder="hello" value="hello"></input>

htmlcsssafaritransition

Answer №1

experiment with transition:duration

transition-duration:0.4s;
-webkit-transition-duration:0.4s;
-ms-transition-duration:0.4s;
-moz-transition-duration:0.4s;


input {
  font-size: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  outline: none;
  transition-duration:0.4s;
  -webkit-transition-duration:0.4s;
  -ms-transition-duration:0.4s;
  -moz-transition-duration:0.4s;
  visibility:visible !important;
}
input:focus {
  font-size: 30px;
}
<input type="text" placeholder="hello" value="hello" />

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

Transferring MySQL information to web pages using hyperlinks within a table

We have encountered a challenge while working on our game shop website, specifically related to the purchase link. The link is displayed within a mysql table and currently directs users to the same page. Our goal is to optimize efficiency by adding new gam ...

phphtmlmysql

Guide on applying CSS to option tag within a select element in VUE.js

I am attempting to design a dropdown menu that resembles the one shown in the image. However, I'm currently unable to include any CSS styling. Can anyone provide guidance on how to create a customizable select dropdown in Vue? https://i.stack.imgur.c ...

javascriptcssvue.js

Using Jquery to encase an element in a div while scrolling down and removing it while scrolling up

After some experimentation, I've managed to wrap an element inside a div using jQuery. My next challenge is to wrap it as you scroll down and unwrap it as you scroll up. Do you think this is achievable? Although I have succeeded in wrapping it while ...

javascriptjqueryhtmlcss

What is the best way to send put and delete requests through a form using node.js and express.js?

Attempting to send a put request: Put form code snippet: <form id="for" action="/people" method="post"> <div class=""> <input type="text" name="Name" value=<%= data[0].name %> > </div> ...

javascripthtmlnode.jsexpress

Is it possible to incorporate a <div> element within a PHP code?

After successfully writing some PHP/SQL code, I encountered an issue when trying to create a new div called "content" along with applying a CSS class. The recommended approach was suggested as follows: $mydiv = '<div name="content">'; $myn ...

phphtmlinclude

Tips on inserting text into form input fields

I need some guidance on how to enhance my form input functionality. The form currently consists of an input box and a submit button. When the user clicks submit, the form content is submitted and processed using javascript. What I am aiming for is to autom ...

javascripthtml

Difficulty in updating Vue variable value following a request

Hello everyone, I am facing an issue regarding a variable value. Within the request, I am comparing each array value to see if there is a match and then updating the match variable to true if a match is found. However, the problem arises when the updated ...

javascripthtmlvue.jsvuejs2frontend

Tips for successfully implementing overflow-x in a timeline layout without causing any format disruptions

I've been working on a dynamic timeline design that adapts to different screen sizes. I applied overflow-x property to prevent horizontal scrolling in the mobile version, making the burger menu's sub-items visible without requiring a click. Howev ...

htmlcsshtml-listsoverflowtimeline

Storing user input from Vue.js in a JavaScript array for future use

Utilizing vue.js <template> <input id="email" v-model="email" type="text" placeholder="Email"> <input id="name" v-model="name" type="text" placeholder=" ...

javascripthtmlvue.js

Facing a selection list issue on a web application built with Flask and Vue.js

I'm trying to integrate Flask and Vue.js together, but I've encountered an issue with my select element. The following code snippet is present in my HTML file: <div class="col-sm-10"> <select class="form-select" v-mod ...

htmlvue.jsflask

Using the ternary operator in React to implement inline styles

Within my React/Typescript project, I aim to dynamically exhibit a color based on the presence or absence of a value in payload[1]. In the code snippet below, note the usage of an inline style tag. <li className="recharts-tooltip-item" style={ ...

javascripthtmlcssreactjstypescript

Having trouble retrieving a base64 encoded image from a MySQL database using PHP

Within my MySQL database, there is a longblob field that stores a binary value representing an image uploaded through my website. I am currently attempting to retrieve the image using: <?php while($record = mysqli_fetch_assoc($result)): ?> <div&g ...

phphtmlmysql

Having issues with floats in Bootstrap?

I'm facing an issue trying to float two elements within a Bootstrap navigation bar, but for some reason it's not working. .cls1 { float: left !important; } .cls2 { float: right !important; } <link href="https://maxcdn.bootstra ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to shift an image within a div using CSS?

I am currently facing a challenge with moving an image inside a div element. I need to adjust the image by 50 pixels down and 50 pixels left, but I'm having difficulty figuring out how to do this in CSS. I am struggling to find the correct code to con ...

htmlcss

How to create a border using a repeated image with spacing between each repetition

Is there a way to create a dashed horizontal line from an image and adjust the spacing between each dash using HTML and CSS? I feel like using javascript for this would be excessive. https://i.sstatic.net/YiD9q.png I'm encountering this issue with t ...

htmlcss

Discover the job specifications pages on Dice.Com by utilizing C programming language

I have taken on a student project involving web scraping job postings from Dice.Com for analysis. My main focus is on extracting the job description, but I am struggling to figure out how to access it. With limited knowledge in HTML and C#, I find it dif ...

c#htmlseleniumweb-scrapinghtml-agility-pack

Ways to solely add effect to background image without affecting text

I'm on a quest to find a way to create a CSS effect that only applies to an image, excluding the letters and buttons. I need to establish a rule in my CSS without altering the current structure. The issue arises when my code ends up applying the effec ...

htmlcssbackground-imagecss-transitions

Verifying if a div in jQuery holds a specific element

I am currently developing drag and drop widgets using jQuery. After dropping them, I need to verify if my draggable and droppable widget is located inside another div. <div id="droptarget"> <div class="widget">I'm a widget!</div> ...

jqueryhtmldrag-and-drop

Tips for avoiding the security risk of "A potentially hazardous Request.Form" in requests

After integrating a FreeTextBox control into my webpage, users can input HTML tags. However, upon submitting to the server, I encounter the following error: A potentially dangerous Request.Form value was detected from the client (GestisciPagine1_txtTest ...

c#.nethtmlsecurity

Tips for implementing jQuery on a CSS selector's :before pseudo-element

My dilemma involves creating a div using CSS with an added X at the top-right corner using the before pseudo-class. How can I implement a function to close this div by clicking on the X with the assistance of javascript? https://i.sstatic.net/Z5uSq.png C ...

javascriptjqueryhtmlcssasp.net-mvc