Transitioning font sizes may appear jagged on mobile devices

I have been attempting to implement a transition effect on the font-size property. While it works perfectly on desktop browsers, I am facing issues with mobile browsers such as Android Chrome, iOS Chrome, and Safari, where the font-size transition appears to be less smooth.
Here is the CSS code:

.dummy-text{
        font-size: 24px;
        transition: font-size 0.5s linear;
    }


You can find the fiddle showcasing this issue below:
https://jsfiddle.net/3y7zbv0c/1/
Could anyone provide guidance on how to achieve a smoother font-size transition on mobile device browsers?

htmlcsscss-transitionscss-animations

Answer №1

If you want to optimize performance by using animations with @keyframes instead of transition, there is a solution to increasing the text size without relying on Javascript:

https://jsfiddle.net/8x1vz3ra/5/

@keyframes growth {
  from {font-size: 16px;}
  to {font-size: 26px;}
}
.enlarged-text{
  font-size: 16px;
  animation: growth 3s infinite;
}
<div class="enlarged-text">
  This is an example
</div>

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

I can't seem to figure out why my Angular 10 select element is not showing the data I've assigned to it. Can someone help me

I'm currently facing an issue with a select element in the HTML template of my Angular project. The problem stems from having a JSON file containing all countries data. Languages Interface export interface Country{ name:string code:string } ...

htmljsonangularselectbootstrap-selectpicker

Using HTML5 to Define the Size of a File Upload Button

The validation error from W3C states: "Attribute size is not permitted for the input element at this location." <input type="file" name="foo" size="40" /> How should the width of a file input be specified in HTML5? ...

csshtml

Can you tell me the time lengths for Bootstrap 4 transitions?

The transformation of a button's color when hovered over or the smooth opening and closing motion of a Collapse element fall under the category of CSS transitions. I am curious to know where in the Bootstrap files I can find the specific duration valu ...

bootstrap-4css-transitionsduration

Challenge in WordPress Development

As a beginner in website building, I am looking to customize the background of my pages with a solid color. The current SKT Full Width theme I am using has an opaque background which is causing the text on my slider to blend in and not look appealing. All ...

javascriptjqueryhtmlcsswordpress

Incorporating a jQuery word count and limit within PHP code: a step-by-step guide

I am encountering an issue with a textarea count code. It functions perfectly on its own but when I integrate it as shown below, it stops working without throwing any errors. I have been trying to resolve this for more than 3 days now. Any assistance would ...

javascriptphpjqueryhtml

Scraping specific section of text from a webpage's source code with BeautifulSoup library in Python

As a novice in python, I have little to no knowledge of HTML. After stumbling upon a captivating youtube video (https://www.youtube.com/watch?v=kEItYHtqQUg&ab_channel=edureka%21) on web scraping, I became intrigued by the idea of extracting text from U ...

pythonhtmlweb-scrapingurlbeautifulsoup

What is causing my `<nav>` buttons to be left-aligned?

The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful. CSS Snippets: #container { width: 100%; background-color: bla ...

htmlcss

Tips for styling a datatable scrollbar with CSS

My preference is to utilize the datatable API when creating tables. $('#datatable-example').dataTable({ "scrollX": true, "info" : false, "fnDrawCallback" : function(oSettings) { $('td').removeClass('sor ...

jquerycssdatatable

What is the most effective way to retrieve the count of users who have logged in within the past three months by utilizing Jquery

I am seeking to retrieve the count of users who have logged in the last three months utilizing a JSON API and Jquery. This is my current progress: $.getJSON('users.json', function(data) { var numberOfUserLogged = 0; var d1 = ...

javascriptjqueryjsonhtml

The height of a div element does not automatically default to 100% in Next.js

I'm encountering an issue with styling pages in next.js. My goal is to create full-height pages. Although I've successfully set the height attribute in the body and html tags to achieve full height (verified in dev tools), I'm struggling to ...

htmlcssnext.js

Android devices still allow access to elements even when they are hidden using overflow

Contained within a parent div with overflow hidden is a Facebook-comments widget that is vertically cut off. This setup allows for showing only a portion of the content initially and expanding the parent container using jQuery. While this method works wel ...

androidcssfacebook-commentscoverflow

Interactive button with jQuery that toggles between clicked and unclicked states, automatically reverting to unclicked when clicked elsewhere on the page

I am trying to create a button that changes its appearance when clicked, and returns to its normal state if clicked again or if the user clicks outside of it. Here is the JavaScript code I have written: if($('#taskbar-start').hasClass('ta ...

javascriptjqueryhtml

Enhance your Slideshow with Split Slick and enable the Autoplay feature

I came across a fantastic slider that caught my eye on this website: https://codepen.io/supah/pen/zZaPeE All I want to do is incorporate an autoplay feature. Luckily, the Slick slideshow it uses already has this capability. So, I assumed it would be a sim ...

csshtmlslideshow

I have a dynamic form code that allows users to insert data by adding multiple inputs in a row. However, I would like to modify it so that the inputs are added in a column instead

I found this code online that allows users to add extra inputs, but it currently only creates new rows in the database. I would like these inputs to be inserted into different columns within the same row. How can I modify it to achieve this? I have alread ...

phphtmlcssmysql

Displaying a Facebook tab exclusively within the Facebook platform

Hello Everyone I have been utilizing woobox to generate Facebook tabs for my pages and I have a query: I have created an HTML page on my personal server, which I am using as a Facebook tab (created with the help of woobox). Now, is there a method whe ...

phphtmlcssfacebook

Include "+5" in cases where additional elements cannot be accommodated

I am working on a project where I have a div called ItemsContainer that dynamically renders an array of items (Item) depending on the screen size. While mapping through the array, I want to check if there is enough space to display the current item. If no ...

htmlcssreactjstypescript

Tips for removing red borders on required elements or disabling HTML validation

I am on a mission to completely eliminate HTML validation from my project. Although this question suggests that having all inputs inside forms can help, I am using angularjs and do not require a form unless I need to validate all fields in a set. Therefore ...

htmlangularjsvalidation

Does the width of a div with an absolute position rely on the width of its parent element?

Is it possible to have a div with absolute position adjust its width based on its content rather than its parent's width? For example, <div style="position:absolute"> <div style="position:absolute"> <div style="position:absolute"> ...

csshtmlcss-position

Error 404 - CSS file missing: encountering a 404 error while attempting to execute Flask code

Hello there! I'm still getting the hang of programming, especially when it comes to web development. Recently, I encountered an issue with my CSS file - whenever I link it to my HTML and run the Python code, I get an error saying that the CSS file can ...

pythoncsshttp-status-code-404

Tips for preventing a page from automatically scrolling to the top after submitting a form

Recently, I set up a form where users can input values. The form is set to submit either on change or when the user hits enter, depending on which value they want to update. However, after the values are submitted, the page automatically jumps back to the ...

javascriptphpjqueryhtmlforms