Wave your way to unique text creation with Firefox

Hey there, I've got some text inside a div that's been transformed with rotate(3deg). Strangely enough, in Firefox, the text appears wavy. When I remove the transform property from the div, the waviness disappears. Is there any way for me to keep the transformation and avoid the waviness?

Here's the HTML:

<div class="card turn-right">
    <div class="card-text">
         <p>Blah. Blah. Blah.</p>
    </div>
</div>

The CSS looks like this:

.card {
    display: block;
    width: 550px;
    height: 375px;
}
.turn-right {
    -webkit-transform: rotate(3deg);
       -moz-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
         -o-transform: rotate(3deg);
            transform: rotate(3deg);
}

Edit:

Just to add, I have to incorporate a @font-face for this particular project.

Screenshot:

htmlcssfirefoxtexttransform

Answer №1

Consider incorporating a different perspective

.turn-right {
    -webkit-transform: perspective(9999px) rotate(3deg);
            transform: perspective(9999px) rotate(3deg);
}

-moz-transform is unnecessary in modern browsers.

Interestingly, the same issue arises in webkit browsers.

What is the reason behind this solution?

There isn't a definitive answer as the browser's source code isn't available to me. However, it seems like the rendering engine of browsers tries to optimize performance by skipping unnecessary calculations. Sometimes these optimizations lead to bugs due to missing essential computations.

To overcome this, one can include elements that challenge the browser into performing the calculation rather than taking the shortcut for an easy solution.

Another approach could be using fixes such as translate3d(0,0,0), translateZ(0), or backface-visibility hidden. Although seemingly redundant, they force the browser to render the content in a more complex manner which can result in optimization and bug resolution.

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

Error encountered while utilizing By.Xpath: NoSuchElementException

Update : After some trial and error, I managed to make it work by placing the element inside an iframe: WebDriverWait wait = new WebDriverWait(_driver, 60); wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By .xpath("//*[@cla ...

javafirefoxseleniumxpath

Data is nowhere to be found despite using the post method, but the URL still contains valuable information

Recently, I've delved into the world of PHP and have been experimenting with HTML forms. Initially, I used the method GET which worked perfectly fine. However, when I switched to using the method POST, I encountered an issue where I couldn't retr ...

phphtml

The td data is appearing fragmented and not continuous in one line

Why is the td element on my webpage not appearing on a single line? The weekly report for XYZ is displaying on two lines, but I want it to be on one line. Why is the label content showing up on the next line? Output: Weekly Report for Testing project ...

htmlcssasp.net

Retrieving the chosen option in Vue.js when the @change event occurs

I have a dropdown menu and I want to perform different actions depending on the selected option. I am using a separate vue.html and TypeScript file. Here is my code snippet: <select name="LeaveType" @change="onChange()" class="f ...

javascripthtmlvue.js

Is there a way to include text beneath the navigation bar and other elements on the page?

I am stuck trying to add some text below my header and navigation bar. Here is the code I've been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

htmlcsstextheadernav

Ways to activate the built-in HTML5 form validation without actually submitting the form

I have a form in my application that I plan to submit using AJAX. However, I would like to implement HTML5 for client-side validation. Is it possible to trigger form validation without actually submitting the form? Here is an example of the HTML code: &l ...

javascriptjqueryhtmlajaxforms

Streamlining all icons to a single downward rotation

I am currently managing a large table of "auditpoints", some of which are designated as "automated". When an auditpoint is automated, it is marked with a gear icon in the row. However, each row also receives two other icons: a pencil and a toggle button. W ...

javascriptjquerycsstypescript

Unable to retrieve the sum total of all product items and display it in the designated text element

My product items are dynamically generated in a list. I have used the calculateItemTotal() method to determine the total for each item. Now, I need to sum up all these item totals and display the result in the total text field. However, instead of showing ...

javascriptjqueryhtml

Vue Page fails to scroll down upon loading

I am facing a challenge with getting the page to automatically scroll down to the latest message upon loading. The function works perfectly when a new message is sent, as it scrolls down to the latest message instantly after sending. I've experimented ...

javascripthtmlfirebasevue.jsdom

Executing a webservice method in an html page using javascript without the need to refresh the page

Is it possible to call a webservice from an index.html page using JavaScript? My webservice is located at "localhost/ws/service.asmx" and the specific web method I want to call is called HelloWorld. The index.html page contains an HTML submit button whic ...

javascriptjqueryhtmlweb-services

Tips for aligning a div (or any other content) in the center of a

I recently added a small div to my webpage to display 3 options in a stylish way, but I'm encountering an issue - the box is appearing on the left side instead of the center. I have tried using various CSS properties like align-items, align-content, a ...

htmlcss

What is the best way to choose the element directly beneath a specific element using jQuery?

I am facing a challenge where I need to manipulate HTML content using only jQuery, without changing the original structure. The requirement is to display and slide down content with a specific class (current) upon clicking on an h1 tag. However, I am strug ...

javascriptjqueryhtml

What is the correct way to denote a CSS class in SASS syntax?

Can you show me how to code this in SASS? .solo:hover > .solo-pane, .solo-pane.active, .solo-pane.lighten { opacity: 0.5; } I'm having trouble separating the classes using commas. ...

csssass

Skrollr's transformation effect makes the text tremble

Using skrollr.js, I am implementing transition effects on an inner div nested inside another div. The inner div is positioned relatively. Here are my codes: HTML Structure <div class="outer"> <div class="inner-div" style="transition:transform ...

javascriptjquerycssskrollr

Utilize pandas.read_html to extract image alt text from web pages

Can you extract the text from the img alt attribute using pandas.read_html? The webpage I am trying to scrape has replaced some text with images, and the original text is now stored in the alt attribute of those images. For example: <td> <div>. ...

pythonhtmlpandas

Wrapping a series of grids within a parent container to manage height effectively with grid960

Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...

htmlcsslayout

Using shadow effects on the <Grid> component with Material UI

Is there a way to implement the box-shadow property on a <Grid> component in Material UI? I've gone through the official documentation regarding Shadows - Material UI, but I'm struggling to grasp how it can be applied to a <Grid>. De ...

cssreactjsmaterial-ui

I'm having trouble getting my .click method to work with the <div id=menuButton>. Can anyone help me figure out why this is happening?

Here is the HTML code I created for a dropdown menu. Initially, in the CSS file, the menu is set to display: none; <!doctype html> <html> <head> <title>DropDown Menu</title> <link rel="stylesheet" href="normalize ...

javascriptjqueryhtmlcss

Open HTML Frameset in a new tab or window

I've been contemplating for the past week on how to address my issue using frameset. Situation: I have an html file for header, footer, menu, and content, each with its own background color. I implemented a frameset for enhanced design. The header ...

htmlcssframeset

Confirmation for deletion in HTML form

Is there a way I can include a confirmation message for deleting an item on my form button? Any suggestions on which JavaScript code to use? <script type="text/javascript"> function confirmDelete() { return confirm("Are you sure you want to delete ...

javascripthtmlformsconfirmation