html – “background: linear-gradient()” – what works in Chrome, does not in Safari

I am trying to set a linear-gradient on a table row.

It works correctly in Chrome – the row is highlighted up to the required width:

Chrome screenshot

But it does not in Safari – Safari instead highlights every <td> cell instead of just <tr>:

Safari sceenshot

I am setting this programmatically via style property on a JSX element in a React application because the percent value is calculated on the fly and different for every row.


<tr style={{background: `linear-gradient(to right, ${color} ${percent}, transparent ${percent})`}}>

In Chrome devtools I can see following being produced:

Chrome devtools

In Safari on the other hand:

Safari devtools

Anyone knows how to solve that?

Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here