CSS: Text-decoration line issue in Safari with "text-decoration: line-through solid #000"

While "text-decoration: line-through solid #000" works as expected in many browsers, including Chrome and Firefox, Safari tends to ignore this CSS rule and doesn't display the desired strikethrough effect correctly.

Solutions:
To correct this issue, I've identified an alternative approach that works specifically for the Safari browser. By applying the following CSS rules, we can achieve the correct display of the text decoration bar in Safari:


text-decoration-line: line-through;
-webkit-text-decoration-line: line-through;
text-decoration-colour: var(--black);
    Explanation of CSS rules:

  • text-decoration-line: line-through;: This rule specifies that the text decoration line must be a strikethrough.
  • -webkit-text-decoration-line: line-through;: This is a specific rule needed to ensure proper display of the text decoration line in Safari.
  • text-decoration-color: var(-black);: This rule defines the colour of the text decoration line. Here I'm using the variable -black, so you need to replace it with the desired colour value, such as #000 for black or one of your own variables that specify a specific colour value.

Conclusion:
By implementing the above CSS rules, we can overcome the issue of the text-decoration-line not displaying correctly in the Safari browser. By including text-decoration-line: line-through;, -webkit-text-decoration-line: line-through; and text-decoration-colour: var(-black);, we can ensure that the strikethrough is displayed correctly in Safari as well as other modern browsers.

It's important to remember that certain CSS rules may have different requirements and support across different browsers. By having a deeper understanding of browser compatibility and utilising the relevant browser prefixes, we can ensure that our designs display correctly and consistently across different platforms.

So the next time you encounter a text decoration bar issue in Safari, try implementing these CSS rules to achieve the desired effect.