The font rendering in Safari appears to have distinct differences compared to other web browsers

My concern is related to the HTML tag below:

<a href="/partner-team/team" class="button button__style--1">MEHR</a>

This is how the CSS appears:

a {
    text-decoration: none;
}

.button {
    padding: 0.2rem 4rem;
    cursor: pointer;
}

.button__style--1 {
    color: #429a95 !important;
    border: 2px solid #429a95;
    transition: color .3s, background .3s;
    background: white;
    font-weight: 300;
}

When inspecting in Safari using Dev Tools, I notice the following issue:

https://i.stack.imgur.com/BzNZU.jpg

In Chrome, for instance, the Dev Tools show a different result:

https://i.stack.imgur.com/1vnoJ.png

I am puzzled why the text is positioned differently in Safari compared to other browsers like Chrome, Firefox, Opera, and Edge. Is there any solution available to ensure consistent rendering across all browsers?

htmlcssbrowsercross-browser

Answer №1

Here is a functional code snippet:

a {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; 
}

.button {
    padding: 0.2rem 4rem;
    cursor: pointer;
}

.button__style--1 {
    color: #429a95 !important;
    border: 2px solid #429a95;
    transition: color .3s, background .3s;
    background: white;
    font-weight: 300;
}
<a href="/partner-team/team" class="button button__style--1">MEHR</a>

The only changes made were the addition of the following styles to your a tag:

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;

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

Guide on extracting data from a JavaScript table using Python

Looking to extract information from a table on this page: . There are a total of 18 pages, but the url remains constant for each page. My usual method involves using BeautifulSoup to scrape data from HTML pages. However, in this case, the required data is ...

javascriptpythonhtmldatatable

Updating the innerHTML of a frameset

I have a unique challenge that involves loading the frameset of www.example.com/2.html when accessing www.example.com/en/test/page.html. Successfully accomplished this task. Now, after loading 2.html in the frameset, I want to modify ".html" to ".html" t ...

javascriptjqueryhtmlcss

Transforming an unordered list to function similarly to a select input

I am looking to style a ul list to function as a select form element. I have successfully populated a hidden input using my code. Now, I am trying to make the ul behave like a select input when either the keyboard or mouse is used. Previously, I had some ...

javascriptjqueryhtml

Connect ngx-time picker to form input in Angular

Currently, I have successfully implemented Angular material date pickers in my project, however, I am facing a challenge with integrating time pickers as it is not natively supported by Angular Material for version 8. To address this issue, I am utilizing ...

htmlangulartypescriptangular-material

What is the method to show text on hover in angularjs?

I'm a beginner in AngularJS and I'm looking to show {{Project.inrtcvalue}} when the mouse hovers over values. Can anyone guide me on how to achieve this using AngularJS? <table ng-table="tableParams" show-filter="true" class="table" > ...

javascriptjquerycssangularjs

Angular JS is encountering an issue where the promise object is failing to render correctly

I'm currently learning Angular and I have a question about fetching custom errors from a promise object in Angular JS. I can't seem to display the custom error message on my HTML page. What am I missing? Below is my HTML file - <!DOCTYPE htm ...

javascripthtmlangularjspromise

Incorporate a PowerPoint presentation into an Iframe

Can you confirm if this code is correct? Is there another way to achieve the same result? Could you please provide some assistance with the code? I would like to show my PowerPoint file in an iframe when I click on a link. <html> <head> < ...

htmlcss

Float and tap

Can someone assist me with my code? I have 4 identical divs like this one, and when I hover over a link, all the elements receive the same code. <div class="Person-team"> <div class="profile-pic-d"> <a cl ...

javascriptjqueryhtmlcss

Transferring the chosen dropdown value to the following page

I am attempting to transfer the currently selected value from a dropdown to the next page using an HTTP request, so that the selected value is included in the URL of the subsequent page. The form dropdown element appears as follows: <form name="sortby ...

javascriptphpjqueryhtml

Interactive search tool for toggling visibility of elements

Hello everyone, this is my initial post on StackOverflow. Keeping my fingers crossed that it goes smoothly! <input type="Text" id="filterTextBox" placeholder="Filter by name"/> <script type="text/javascript" src="/resources/events.js"></scr ...

javascriptjqueryhtmlcss

Prevent Cross-Site Scripting attacks in Laravel by sanitizing user input, even when allowing HTML tags

What measures can be taken to protect against XSS attacks when a user is allowed to use HTML tags, such as in a textarea element? Avoiding the stripping or escaping of all tags complicates the situation and rules out the option of using {{ }}. It's a ...

javascriptphphtmllaravelxss

Transfer data in an array within value="" separated by ':' through AJAX/JSON in PHP and HTML

Can data be passed in array form using AJAX/JSON? For example, like ".$row['departmentname'].":".$row['jobposition'].":".$row['deptcode']."? Here is a sample code snippet to illustrate this: if(sqlsrv_num_rows($query) > 0 ...

phphtmlsqljsonajax

Struggling to add a border to an HTML div element

I'm completely baffled as to why I can't seem to add a border around my div. Here is the link to my jsfiddle: http://jsfiddle.net/4HnKs/1/ It's possible that I've been staring at my computer screen for too long, but no matter how hard ...

csshtmlborder

How to apply an icon image using the background property in CSS in Vue 3

Need help setting background image from the public folder |_public | |_images | |_icon.png |_src |_components |_TheHeader.vue I'm having difficulty trying to set an image as a background in TheHeader.vue using CSS, but the image is located in ...

cssvue.jsvuejs3

Jquery used to create an image gallery with a zoom-in feature

Kindly review the URL provided below: I noticed that they are using flash to display a slideshow on that site. Is there a way to achieve similar image display using jquery? I have searched online but haven't found a jquery solution like that. ...

phpjqueryhtml

The CSS selectors wrapped in jQuery vary between Chrome and Internet Explorer 11

When utilizing a jquery wrapped css selector such as $($("#selector").find('input[type="textarea"])'), I am able to input values into the textarea in Chrome using $($("#selector").find('input[type="textarea"]).val(someValue)') but encou ...

javascriptjqueryhtmlcssinternet-explorer

Creating an HTML form that triggers a PHP script to send email upon submission via a Google Cloud Server

While running a php script to send an email upon form submission, I encountered an error message. Here are the details of the error: This XML file does not appear to have any style information associated with it. The document tree is shown below. &l ...

phphtmlwebgoogle-cloud-platformwebserver

Issue with Angular 6: Animation with LESS is failing to work post deployment

Hello everyone, I'm facing an issue with my LESS animation. When I deploy my app on the server after using ng build --prod, the CSS animations are not visible in browsers. They work perfectly fine on localhost but fail to work after deployment and I c ...

cssangulartypescriptlesswebdeploy

Ways to ensure a div remains at the bottom of a page without using a wrapper

I am currently working on my website and this is the content I have in my body tag: #social-media { width: 175px; margin-left: auto; margin-right: auto; padding-top: 10%; } #social-media img { padding: 5px; } #soci ...

htmlcss

manipulating dropdown visibility with javascript

I'm feeling a bit lost on how to structure this code. Here's what I need: I have 5 dropdown boxes, with the first one being constant and the rest hidden initially. Depending on the option chosen in the first dropdown, I want to display the corres ...

javascripthtmlcss