What is the best method to eliminate a bizarre border from a text gradient in Safari?

There seems to be a bug with text gradients on Safari that doesn't exist on Firefox or Chrome. I am using Safari 13.0.5 and you can see the issue in the screenshot below.

Screenshot displaying the problem

I have been attempting to apply a gradient to some text using the following code:

.vs-plus-text {
  max-height: 500px;
  width: auto;
  visibility: visible;
  padding: 25px;
  overflow: hidden;
  z-index: 100;
}

.p1 {
  background: -webkit-linear-gradient(#ab1d5b, #d92c48);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
<div class="vs-plus-text hover-plus-vs12 hover-plus-res">
  <p class="p1">Lorem ipsum</p>
</div>

I have tried adjusting margin, padding, line-height, etc., but when I remove the "top border or left border," a border appears on another side. The border property doesn't seem to affect it.

I came across a similar problem with no clear solution available.

Link to the related issue

Thank you for any assistance you can provide.

csstextsafarigradient

Answer №1

I managed to overcome a similar issue by utilizing SVG to display my gradient text.

React Example

<div className="countdown">
  <svg
    style={{
      width: '100%',
      height: '100%',
    }}>
    <defs>
      <linearGradient id="gradient" x1="0" x2="0%" y1="0" y2="100%">
        <stop stopColor="#ffe19b" offset="0%" />
        <stop stopColor="#f3cb6f" offset="100%" />
      </linearGradient>
    </defs>
    <text
      fill="url(#gradient)"
      dominantBaseline="middle"
      textAnchor="middle">
      <tspan x="50%" y="50%">
        {seconds}
      </tspan>
    </text>
  </svg>
</div>

Code Pen Example

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

Attempting to change the primary color in Bootstrap is ineffective following a button click

I have been attempting to customize the primary color of Bootstrap 5 using SCSS. Everything works perfectly until I click a button that opens an external link. Below is the content of my SCSS file: $primary: #ae217aff; @import "../node_modules/boots ...

javascripthtmlcsssassbootstrap-5

Ways to condense a text by using dots in the middle portion of it

How can I dynamically shorten the text within a container that varies in width? The goal is to replace the strings between the first and last words with dots so that it fits within the container. For example, Sydney - ... - Quito. It should only replace wh ...

javascripthtmlcss

Unable to adjust font size: a technical glitch is preventing the increase, decrease

I'm currently working on implementing a font size adjustment feature on my website, but I'm encountering some difficulties. My goal is to have all elements on the website resize accordingly, including headers, buttons, and modal windows. Below i ...

jquerycss

Employing delegate for switching roles between classes

I'm having trouble using the jQuery delegate function to toggle classes. What I want to achieve is toggling the class of <li class="unselected-values"> to <li class="<li class="unselected-values"> when the client clicks on the label ...

jquerycssrazordelegates

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

Description While navigating on mobile browsers, I'm facing a challenge with keeping an element centered as I scroll due to the browser window minimizing. I've experimented with different solutions such as utilizing the react-scroll library and ...

javascriptcssreactjsnext.js

Challenges I encountered with styling my navigation bar using CSS

My goal is to have the font color change to blue when a user hovers over a link in my navigation bar. I've tried using the following CSS code: #nav a:hover{ color: #1B8AD8; background: none; text-decoration: none; } However, it's not working as ...

css

What is the best way to showcase four columns of identical attributes in an HTML table without repeating the values four times?

I am working on an Angular system that fetches data from the Pokemon TCG API. I am specifically interested in the "cards.images.small" attribute, which provides the image link for display. However, I am facing an issue where the cards are being displayed q ...

htmlcssangulartailwind-css

Styling with CSS to create a layout similar to Facebook Messages

I am attempting to design a web layout similar to Facebook's Messages page, with a fixed height header and footer, and a flexible height main element. Within the main element, there needs to be: A div (100% height of the main elem.) that is scrolla ...

htmlcssflexboxscrollable

How can I define the boundaries for the scrolling of a static background image?

Is there a way to limit how far a fixed background image can scroll down a page? Essentially, is it possible to change the background attachment to static when the bottom of the background image is 10px away from the bottom edge of its div container? In t ...

javascripthtmlcss

Calculator built with HTML, CSS, and JavaScript

Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that ...

javascripthtmlcss

Implementing a fixed div with jQuery scrolling

I need the left div to stay in sync with the scrolling content. However, there is a challenge because this div is taller than the screen. I want the user to be able to see the bottom of the left div when they reach the bottom of the page. My solution invo ...

jqueryhtmlcssscroll

Hide object scroll percentage with CSS styling

Is there a way to dynamically hide an element based on the user's scrolling behavior? I have incorporated floating social buttons into my website, and I am looking for a solution that will hide them when the user reaches the bottom of the page (foote ...

cssscrollhidepercentage

What is the method for customizing the color of a placeholder text in a specific text field

Is there a way to style placeholder text in different colors for each text field? According to the Mozilla documentation, the code snippet provided will change the color of the entire input tag. If you'd like to learn more, follow this link: https:/ ...

javascriptjquerycsshtmlfirefox

I'm unable to adjust the font size of the final h3 element

I'm currently designing a webpage with various titles, but I've encountered an issue. I am unable to adjust the font size of the last h3 title without affecting the rest of the titles. I'm curious as to why this is happening and how I can re ...

htmlcssdom

Make toggleClass show up smoothly without disappearing

I'm currently working with jQuery's toggleClass() method and I want to achieve a fade-in effect without the corresponding fade-out animation. Using the "duration" attribute applies the same duration for both actions, which is not what I want. I w ...

javascriptjqueryhtmlcss

Designed radio buttons failing to activate when focused using a keyboard

I'm facing an issue with radio input buttons that I've dynamically added to a div using jQuery. They function properly when clicked with a mouse, but do not get activated when using the keyboard tab-focus state. NOTE: To style the radio buttons ...

javascriptjquerycssfocusaccessibility

"Implementing a responsive design with a background image and radial gradient - how to

The image currently in use: https://i.stack.imgur.com/piK6l.jpg Here is how I've implemented it using Vue.js, Bootstrap, and CSS: Code Snippet <div class="landing"> <div class="container text-white details h-100"> ...

htmlcssvue.jsbootstrap-4radial-gradients

Modifying the dimensions of mat-card in Angular Material

https://i.stack.imgur.com/CP16N.png I am struggling to make both components the same height, similar to the left form. I have tried adjusting margins and padding but nothing seems to work. Below is the HTML code for the parent element: <mat-tab label= ...

cssangularbootstrap-4angular-materialgrid

The layout of my CSS grid item is slightly off, but the overall result is nearly accurate

Exploring the realms of CSS grid on my website has led me to create an intriguing "add friend" menu design. The layout I am aiming for is depicted in this visual representation: https://i.sstatic.net/vg2T8.png Here is a snippet of the HTML and SCSS code ...

htmlcsslayoutcss-grid

What could be causing the issue of CSS animation not functioning properly when used in conjunction with a

I am working on creating a switch button with CSS and JavaScript that needs an animation when toggling or clicked. The only issue I am facing is related to the animation. I am wondering if there might be any problem with the positioning (relative, absol ...

javascripthtmlcss