Disappearing act: CSS3 transform - rotate makes font vanish

When applying a simple css3 transformation rule to an html element which contains various other elements like h1, h2, inputs, and img, I encounter the following issue:

    div{ 
  -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 

 }

The issue at hand is that the font gets distorted when using the rotate property in CSS3 transformations. How can this be fixed?

Image reference:

Is there a workaround to prevent the font from distorting or looking bad when rotating with CSS3?

Note: To avoid responses like "it looks fine to me" :D please carefully examine how characters are not vertically aligned properly, for instance the word Quale specifically focusing on the letters l and e.

In my experience, Chrome displays no issues, whereas Firefox seems to have trouble with fonts during rotation.

I've noticed that the font appears normal only when it's a larger size, like, font-size:30px and above. If the font size goes below 30px, then it doesn't look right.

cssfontsrotationtransform

Answer №1

A couple of days ago, I came across an interesting observation about how different versions of Chrome handle CSS3 rotations with and without the -webkit- prefix.

UPDATE:

I noticed a similar issue in Chrome where the rendered output looks jagged and misaligned, just like in the image you shared. To address this, I experimented with applying -webkit-filter: opacity(0.999); or -webkit-filter: blur(0px); in Chrome. This seemed to improve the rendering and alignment, although it did introduce a slight blurriness effect. Surprisingly, this workaround also worked with other filters.

Unfortunately, using -moz-filter for Firefox didn't yield the same results as in Chrome. After some research, I found a solution that produced a similar outcome to -webkit-filter in Chrome:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

The numbers in the values represent a matrix:

1 0 0 0 0 
0 1 0 0 0
0 0 1 0 0 
0 0 0 1 0

I've included a screenshot from Firefox showing the before and after effects of rotation and using filters.

For a fullscreen view, click here: https://i.stack.imgur.com/3vgXB.jpg

Check out the LIVE EXAMPLE (works on both Chrome and Firefox) for reference.

Answer №2

The appearance might vary based on the web browser you're using. From my personal experience, Firefox is the most reliable when it comes to handling rotation effects. On the other hand, Chrome can distort text while Internet Explorer tends to produce numerous errors.

If you want to experiment with rotating elements, JavaScript is an option but it requires more complexity compared to using CSS transformations. Check out this resource for more information: https://code.google.com/p/jquery-rotate/

Answer №3

:-) It appears that you are correct in your observation. It seems to be a rendering issue, as there may be variations in output across different browsers when using transforms. ;-)

Sometimes, the only solution that seems to work is by forcing 3D mode:

input{ transform:rotate(-3deg), translate3d(0, 0, 0); }

However, it might not have any effect in this case.

Answer №4

Did you attempt wrapping the input in a parent div and rotating that container instead of directly rotating the input itself?

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

Turning HTML elements 90 degrees for vertical printing without the need for a landscape class

My current project involves creating a template for generating PDF files with CSS. I've set up different paper sizes and orientations using @page and media queries in my CSS code. You can check out a snippet of the CSS here. One challenge I'm fa ...

htmlcsspdf

Activate the Bootstrap 5 responsive font sizing feature (RFS) for the base font elements

I'm attempting to utilize Bootstrap's RFS functionality in version 5.1.3 to apply font sizing globally. Within my SCSS file, I've defined some basic font sizes, imported the Bootstrap SCSS files, and configured the font size settings. Howev ...

csstwitter-bootstrapsassresponsivebootstrap-5

"Adding an Image to Another Image in HTML or JavaScript: A Step-by-Step

Hello there! I'm currently working on creating a status bar where I can add an image after another image. Let me explain my idea clearly. So, I have two images in GIF format: one is white and 10x10px, and the other one is black and also 10x10px. On ...

javascripthtmlcssimagetags

Adjust the styling with jQuery according to the selected value from the dropdown menu

Check out this Fiddle I have a jQuery script that is supposed to change the style of an input box to display:block if the selected value is "<>" (Between). However, currently it is changing the css for all selected items instead of just the target i ...

javascriptjqueryhtmlcss

Checkbox and Ionic avatar image combined in a single line

I am currently working on a mobile app using the ionic framework. I would like to create a layout with an avatar image on the left, text in the middle, and a checkbox on the right. Can anyone provide guidance on how to achieve this? The code snippet below ...

htmlcsscordovaionic-framework

Error: webpack is failing to load the style and CSS loaders

I'm currently experimenting with the FullCalendar plugin from fullcalendar.io. They recommended using Webpack as a build system, which is new to me. I managed to set up the calendar functionality after some research, but I'm facing issues with th ...

javascriptjavacssnpmwebpack

CSS unexpectedly adds a border to a div element that does not have any border properties set

Currently, I have a bar with buttons that I refer to as the control bar. My intention is for it to be fixed at the bottom of the screen and span the entire width. However, there seems to be some unwanted white space on the bottom and right edges of the bar ...

htmlcss

Tips for incorporating multiple classes in Material UI by utilizing the classes props

When using the css-in-js technique to apply classes to a react component, how can I add multiple classes? Below is an example of the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap&apo ...

cssreactjsmaterial-designmaterial-uijss

The pseudo element 'not' in CSS is currently not functioning as expected when applied to an anchor tag

When working with CSS, I encountered an issue while trying to apply a pseudo element on hover and active states of anchor tags. Unfortunately, my code was not producing the desired outcome. a:not(a[name="nobgcolor"]):hover{color:#ffff35;background-color:# ...

css

Poor height parameter

I am encountering an issue with the height of the div.divB element in this code snippet: <div class="divA"> <img src="http://lorempixel.com/1000/130"/> <div class="divB"> <span>Text text</span> </div> ...

htmlcss

Dark Mode Caused by CSS Overriding Accordion

I'm currently using an accordion feature from Flowbite, but I am facing issues with it defaulting to dark mode upon page load. Upon inspecting the element, I discovered that there is some dark mode CSS included in the Flowbite package. In an attempt t ...

htmlcsscomponentstailwind-cssflowbite

Adjusting the Height of the Video Jumbotron in Bootstrap

One of my main goals is to create a jumbotron with a video that plays, occupying 100% width and 70% height of the screen. However, I am facing an issue where the video follows the scrolling behavior when I don't want it to. Specifically, as I scroll d ...

htmlcssbootstrap-4

Strange height problem detected in embedded YouTube video

Currently, I have a page with an embedded YouTube video that is intended to be placed in a container with a variable width. When the video is outside of the container, the aspect ratio appears normal. However, once it is placed inside the container, the he ...

htmlcssvideoyoutube

Responsive slide displays a unique number of items per slide depending

I created a logo slider using Bootstrap, similar to the one showcased here: http://jsfiddle.net/juddlyon/Q2TYv/10/. Currently, each slide in the slider displays 4 logos. I would like to make it responsive so that on smaller screens, only 2 logos are shown ...

phphtmlcss

What is the process for encoding images in HTML code?

Is there a method to embed a background image directly in the HTML code? For instance: background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX); If I have an image file, can I encode its data and t ...

csshtml

Creating a multi-column layout with HTML and CSS

I'm currently exploring the most effective method to design this concept: https://i.stack.imgur.com/SOQp4.png The black square symbolizes small icons, accompanied by a heading and paragraph for each specific section. The icons need to align with the ...

htmlcss

Deleting an element from an array stored in local storage with the help of jQuery

Summary: Developing a front-end wish list feature Tech Stack: Utilizing HTML5 (localStorage), CSS, and jQuery Key Features: Ability to add and delete items dynamically with real-time count display Challenge: Issue encountered when trying to remove added ...

javascriptjquerycsshtmllocal-storage

The div containing the background image does not resize properly when using media queries

page in question. I am currently working on a chess board project where each cell is represented by a div element. My goal is to make the board expand beyond certain minimum widths using media queries, but for some reason, this functionality is not working ...

htmlcssangularjsmedia-queries

Merging Fewer with Visual Studio 2012

Combining all Less files into a single stylesheet? After following the instructions in the above link, I have successfully merged my Less files together for easier CSS reading during development. However, I would like to ensure that end users only need to ...

cssvisual-studio-2012lessweb-essentials

What is the best way to make an HTML element's width automatically adjust based on the margin size?

I'm currently working on creating a rectangular button using HTML and CSS. The challenge I'm facing is ensuring that the width of the button remains consistent regardless of the amount of text it contains. Whether it's just a few words or mu ...

htmlcss