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.

Code:

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

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