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

Obtaining Font Information using Node.js

Is there a way to retrieve the Description section of a font's properties, as seen when you right-click on the file? https://i.stack.imgur.com/rwnLw.png I am specifically looking for details related to the Title attribute. I tried using the get-fil ...

node.jswindowspowershellcmdfonts

Turning HTML into an image with the power of JavaScript

Utilizing html2canvas to convert a div into an image, everything is functioning properly except for the Google font effect. The image shows how it eliminates the effect from the text. https://i.stack.imgur.com/k0Ln9.png Here is the code that I am using f ...

javascriptjqueryhtmlcss

What are the steps to create a scrolling effect for the menu buttons on the mobile version of

When accessing the mobile version of Facebook on a handheld device, you will notice a menu with various options like "About," "Photos," "Friends," "Subscriptions," "Map," and more. This menu is designed to be slideable on your mobile device. Using HTML, ...

htmlcssjquery-mobilecss-float

JsPlumb: Incorrect endpoint drawn if the source `div` is a child of a `div` with `position:absolute`

My current setup involves two blue div elements connected by jsPlumb. You can view the setup here: https://jsfiddle.net/b6phv6dk/1/ The source div is nested within a third black div that is positioned 100px from the top using position: absolute;. It appe ...

javascripthtmlcssjsplumb

Creating a webpage that dynamically loads both content and video using HTML and Javascript

I designed a loading page for my website, but I could use some assistance. The loading page remains visible until the entire HTML content is loaded and then it fades out. However, I am facing an issue because I have a background video that I want to load ...

javascriptjqueryhtmlcssvideo

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: I've tried several solutions, the latest of which involves the following CSS... @media print{ @page { size:10 ...

javascripthtmlcsspdfpage-break

The Twitter widget is not staying in sync with the rest of the page when scrolling on

Twitter provides a widget that is widely used by many people. Below is the code provided by Twitter: <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', ...

htmlcssinternet-explorerscroll

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it ...

jqueryhtmlcssonclick

Mobile Image Gallery by Adobe Edge

My current project involves using Adobe Edge Animate for the majority of my website, but I am looking to create a mobile version as well. In order to achieve this, I need to transition from onClick events to onTouch events. However, I am struggling to find ...

javascripthtmlcssimage-galleryadobe-edge

Transferring Chart Div Titles Above Bars

Is there a way to adjust the layout of an HTML bar chart so that the names or labels appear outside of the bars, tagged to the left end? <!DOCTYPE html> <style> .chart div { font: 10px Ubuntu; background-color: white; text-align: right; ...

htmlcss

div within a fixed width container with 100% width inside

Is there a way to ensure that div B has a width of 100% when nested inside Div A, which already has a fixed width? .divA{width:600px; margin:0 auto;} .divB{width:100%; height:20px; background-color:black} .filler{height:800px; background-color:grey} ...

jqueryhtmlcss

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

javascripthtmlcss

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

The presence of an image within an HTML anchor is causing an unexpected artifact to

Currently, I am working on a simple header design, but there seems to be a strange issue with the anchors containing image tags. The problem can be seen in the screenshot below: Image Link Here is the HTML structure: <div class="block-content"> ...

htmlcssanchor

Alter the path within a paragraph tag in html

I'm having some trouble changing the direction of a tag inside another tag. It's not working correctly for me. In the example below, I want to see aslami @ exactly as I have written it, but the result is showing @ before a instead of after i. ...

htmlcss

Switching between dark and light mode in Ant Design

I have successfully implemented dark mode toggling in my application. However, when I try to switch back to light mode, the CSS does not seem to be reloading properly. Below is the code snippet: //ThemeContext.jsx const DarkTheme = lazy(() => import(". ...

cssreactjsantd

Ways to assign a CSS class specifically for images

.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...

javascriptjquerycss

Having trouble setting the CSS width to 100%

Is there a way to assert the CSS width of an element in NightwatchJS to be 100% without hard-coding the value? Currently, when I attempt to do so, it fails and reports that the width is 196px. The specific error message is as follows: Testing if element ...

javascriptcsstestingbddnightwatch.js

I am trying to center align this image, but for some reason, it's not cooperating

Attempting to center the image using margin-left: auto and margin-right: auto properties in the code snippet above has proven unsuccessful. The image is not aligning as desired. What could be causing this issue with the code? Are there any other techniq ...

htmlcss

CSS - Nesting classes within one another

I'm currently working on customizing a Tumblr theme. Users have the option to choose between a one-column or two-column layout style, and I'm facing some challenges with implementing this in the CSS code. I attempted to add a class based on the u ...

htmlcss