Tips for ensuring smooth rendering of big fonts in Chrome on OSX

On my Macbook Pro running Mojave, I noticed that regular fonts appear normal, but large fonts look jagged in Chrome (unlike Safari or Firefox).

You can see an example on CodePen

.large {
  font-size: 300px;
  font-weight: bold;
}

Chrome

https://i.sstatic.net/kT3mY.png

Safari

https://i.sstatic.net/UQvzS.png

Firefox

https://i.sstatic.net/xkgTP.png

Despite trying the suggestions from this Stack Overflow post (enabling font cache scaling and accelerated 2D Canvas), the issue persists.

Answer №1

By turning off "Use hardware acceleration when available" in chrome://settings, I was able to fix the issue.

Initially, I couldn't replicate the jaggedness or blockiness, but upon switching to MacOS Mojave as specified, the problem became apparent. It's surprising that this wasn't caught during testing, and I anticipate either Chrome or Mojave releasing an update to resolve it soon.

It seems that the problem is connected to changes in OS defaults; Apple disabled sub-pixel font rendering in Mojave and presented it as a "refinement". Since sub-pixel rendering is GPU-handled, disabling GPU rendering in Chrome serves as a temporary solution. Alternatively, you could try using the defaults write technique from the linked website.

In conclusion: this issue likely cannot be fixed through CSS code adjustments, as it pertains to user-specific machine settings.

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

Positional Error Found in Bootstrap Popover Arrow

I'm having an issue with the Bootstrap Popover Tooltip. Can anyone explain why the arrow is not formatting correctly? <div style="display:inline-block;"> <a id="pop" href="#" data-toggle="popover" data-content="<%= user.experience.de ...

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

ChromeDriver is optimized to work with Chrome version 114 and not 160

After updating my Chrome browser to version 160, I encountered the following error: "org.openqa.selenium.SessionNotCreatedException: session not created: This version of ChromeDriver only supports Chrome version 114 Current browser version is 119.0.60 ...

What is the best way to align a jQuery Cycle 2 Slider in the middle of the

Having some trouble centering a jQuery Cycle 2 Slider on my page. You can see the slider here. I've attempted multiple methods to center it, but none have been successful. Check out the HTML code: <div class="slider"> <div id=outside> ...

Tips for enhancing the flexibility of the owl carousel

I've been trying to make four items fit on a medium screen and two on a mobile device, but no matter what I do - adjusting widths, heights, columns, and responsive classes like col-6, col-md-3, col-lg-3 - nothing seems to work well. I could really use ...

When scrolling, use the .scrollTop() function which includes a conditional statement that

As a newcomer to jQuery, I've been making progress but have hit a roadblock with this code: $(window).scroll(function(){ var $header = $('#header'); var $st = $(this).scrollTop(); console.log($st); if ($st < 250) { ...

Safari displays an inexplicable gray border surrounding the <img/> element, despite the actual presence of the image

https://i.stack.imgur.com/4QR52.png There is an unexpected gray border visible around the dropdown image, as seen above. This occurrence has perplexed me because, according to several other queries, this problem arises when the image's src cannot be ...

Issue with Bootstrap 4 column width when using Angular 2 *ngFor

I have a container that displays search results. The layout is set up using Bootstrap columns, but there seems to be excessive padding or margin causing the results to appear very narrow. Interestingly, if I manually input each result instead of using *ngF ...

In HTML, a Bootstrap row appears on top of another row when viewing on mobile devices

I have implemented a Bootstrap HTML section that consists of a container and two main rows. Here is the code snippet: <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style& ...

What is the best way to format a `<ul>` element that does not contain any `<li>` elements?

A new feature on my website allows users to dynamically add list items (<li>) to a list container (<ul>). I want the list container style to change when there are no list items present. <ul class="con"> </ul> ul.con:not(: ...

What is the best way to showcase a single <ul> list in an infinite number of columns?

Utilizing Django on the backend, I aim to showcase the list below in an unlimited number of columns with overflow-x: auto. <ul class="list"> {% for i in skills %} <li>{{i}}</li> {% endfor %} </ul> Example Result: 1 7 ...

Guide to pinpointing a location with Google Maps

I am currently working on setting up a contact page that includes Google Maps to show the location of a meeting place. Here is the code I am using: JavaScript (function(){ document.getElementById('map_canvas').style.display="block"; var ...

Characters from Font Awesome are invisible on my screen

I am struggling with the font awesome plugin as I am unable to view the characters. Below is my code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <l ...

Using fixed positioning in CSS caused a malfunction in the layout of Materialize columns

Looking to develop a unique sidenav menu design for Large and Medium screens using Materialize. After referring to the example provided in the Materialize documentation, I successfully implemented it and found it cool! However, my goal is to have the Sid ...

How to use jQuery to hide radio buttons that are not checked when clicking a submit

Looking to dynamically hide all unchecked radio buttons and their labels until a submit button is clicked, displaying only the checked radio button. <form method="post"> <input type="radio" name="radiobtn"> <label for="first">Fir ...

The React-bootstrap Modal encounters issues when handling image content and scaling for mobile display compatibility

Can someone please assist me with displaying the full image of a small image located in the gallery? Whenever I try to scale the display, the Modal automatically resizes but the image does not resize accordingly. The image ends up overlapping when scaling ...

Creating a fluid side navigation bar in reactjs

Can someone please help me with the following code issue? I am encountering an error related to the script tag when running it in ReactJS, although it works fine in a simple HTML file. Upon starting npm, an error is displayed pointing to line number which ...

Tips for avoiding a ligature occurrence in a specific location

I am a fan of ligatures in general, as they improve readability. I want to implement them across all my HTML pages. However, there is this one word Hanftierheft (which is German and a compound word made up of Hanf, Tier, and Heft). I specifically do not w ...

How can I adjust the padding and width attributes of the mat-menu in Angular 5

Today, I am struggling with a piece of code. Whenever I click on the Details button, it is supposed to open a mat-menu. However, for some reason, I cannot seem to adjust the padding or width of the menu: <div id="box-upload" [hidden]="hiddenBoxUpload" ...

What is the best way to take control of DOM alterations?

In the project I'm currently working on, the client has a modal box with its display property set to none. Upon clicking the CTA button, it triggers the application of the fadein and fadeout classes. This results in a change from display:none to displ ...