Using subpixel rendering in the Blink engine causes text to appear fuzzy and less crisp

Have you noticed the recent change in Chromium's rendering engine behavior regarding non-integer pixel values? This alteration has caused text to appear blurry, impacting many websites that utilize the popular 

transform: translate3d(-50%, -50%, 0);
centering technique. For example, check out .

Despite scouring this platform, I have not come across any discussions regarding this issue. The standard solutions for fixing blurry text like -webkit-font-smoothing and translateZ(0) do not seem to be effective in this case.

So, aside from using flexbox, does anyone have a workaround for this new blurriness problem?

css

Answer №1

Try replacing 

transform: translate3d(-50%, -50%, 0);
with 
transform: translate(-50%, -50%);

If possible, refrain from using translate3d in Chrome temporarily. There are various known issues in Chrome (and some related to CSS) when it comes to 3D transformations.

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

Safari browser: Navigate with rtl/lrt direction

I created a webpage with right to left (rtl) direction. Below is the html tag I used: <html dir="rtl"> However, I needed two parts of the webpage to be written from left to right (ltr), so I added the dir attribute to this div: <div dir="ltr"&g ...

htmlcssright-to-leftbidi

Animating Angular ng-template on open/close state status

I am looking to add animation when the status of my ng-template changes, but I am unable to find any information about this component... This is the code in my report.component.html <ngb-accordion (click)="arrowRotation(i)" (panelChange)="isOpen($even ...

htmlcssangulartypescript

Alignment Woes in Bootstrap Designs

I'm seeking assistance regarding the alignment of content on my webpage. The content is not aligning properly with the sidebar and footer, and I'm unsure how to proceed. The page should have a left margin to avoid touching the sidebar, and the fo ...

htmlcssbootstrap-4

What could be causing the slider to have a choppy transition between images?

The Issue: Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have ...

htmlcssbootstrap-5

The CSS styles are not being applied to the PHP code

I seem to have a tangled mess of CSS / PHP / HTML to deal with. The issue I'm facing is that something works on one PHP script but not the other. Here's a snippet of my code: <?php if ($daten->getData_DB_User($get_page_num) != fa ...

phphtmlcss

What is the best way to adjust the size of my <div> to accommodate additional vertical content?

Every time I attempt to include margin-top: 30px to my box_1 and box_2 <div>, the bottom <div> is pushed down and disappears. It seems like my wrapper isn't expanding to accommodate the content. How can I achieve a 30px space between the ...

htmlcss

What is the method of generating an HTML tag solely using CSS?

Looking to style HTML tags without altering them in any way? Consider this example: <div id="Code_G" class="editor-group"> editor-group<br /> <div id="Code_L" class="editor-label "> editor-label </div> < ...

htmlcss

I'm looking for a library or plugin that can be used to develop a customizable sidebar window with docking, resizing, and pinning capabilities similar to the ones found

In Visual Studio, the solution explorer and toolbox windows can be hidden at the side unless pinned. They are also resizable. Is there a way to achieve this same behavior using CSS? Has anyone created a jQuery plugin or similar tool for this? ...

jquerycssjquery-ui

How to use CSS to align text at the bottom of Angular Material icons within spans?

Looking for assistance with this code snippet. I am trying to align the text within the spans to the bottom of the stars. <ng-container *ngIf="starCount"> <span>Not Relevant</span> <button mat-icon-button ...

htmlcssangular-material

Having trouble adjusting the width of the text input in the inline search box form with an input group dropdown

Looking to create a search box similar to this design: https://i.sstatic.net/H93WQ.png What is the most effective way to implement this using Bootstrap? I tried using an inline form and input group dropdown list, but I encountered issues with the text i ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to ensure that a div automatically moves below the main div when it reaches its full length?

I am facing an issue with a foreach statement in jQuery where I am generating Bootstrap cards for each product in a list. The problem arises when attempting to create multiple cards in a row, as the width of the cards becomes too small for the content. I ...

jquerycssbootstrap-5

Using jQuery to create dynamic CSS effects directly on the drop-down menu button

Seeking your kind assistance once again... I am attempting to design a navigation bar that displays the dropdown section upon hovering over the buttons AND shows a bottom border on the button that was last hovered over My code functions properly when I ...

htmljquerycss

Enhancing spacing in Bootstrap 5 with additional spacers

Looking to enhance the spacers in Bootstrap 5 by incorporating it into Sass and customizing the variables. I'm aiming to avoid redundantly defining Bootstrap's spacer options, which are as follows: $spacers: ( 0: 0, 1: $spacer * .25, 2: $s ...

htmlcsssassbootstrap-5

When the mouse hovers over the slider, the final image jumps into view

After successfully building an image slider that displays 2 partial images and 1 full image on hover, I encountered a bug when setting the last image to its full width by default. This caused a temporary gap in the slider as the other images were hovered o ...

javascriptjqueryhtmlcss

What is the correct method for formatting text spacing?

A few months ago, I dabbled in web design and created a basic website. Now, I'm revisiting it to clean up the layout and make it more visually appealing. I initially used non-breaking spaces to separate paragraphs, but I know that's not optimal. ...

csshtmltext

Create a cohesive user experience by implementing the same CSS animation when hovering over two distinct elements

For a learning exercise, I attempted to create an animation. My goal was to have the circle trigger an animation when hovered over, while also revealing the text in the .hide element. However, as soon as I hover over the circle and then move my mouse onto ...

htmlcss

Tips for incorporating a custom CSS design into a jQueryUI tooltip

I am struggling to apply my custom CSS class on top of the jQueryUI tooltip. Although the tooltip is displaying correctly, my styles are not being applied. Here is the code I'm using: $(document).ready(function () { $("#roles").tooltip({ content: ...

javascriptjqueryhtmlcssjquery-ui

css background images are fully covered

Hey there! I recently created a CSS image that covers the entire background of my website. However, when I added a picture in the HTML, it doesn't show up because it's being overlapped by the CSS background. Check out my CSS code: { margin: 0 ...

htmlcss

Adapt the size of HTML video tags based on the width of the screen and level of

Within the site (developed with React, utilizing Typescript and Tailwind), there exists a component that allows users to watch videos (constructed using the HTML Video tag). Additionally, beneath the video, there are various dropdowns and buttons. However, ...

cssreactjstypescripttailwind-csshtml5-video

Struggling to activate the hide/show feature on mouseover

After exploring different methods and seeking guidance on this platform, I am still unable to achieve the desired outcome. My goal is to have the content in the "topb" section appear when hovering over a link with the class of "top" and disappear when the ...

javascripthtmlcss