I have some very simple HTML that works perfectly on Chrome, but on Safari it does not. According to the web inspector, my span should be showing green text. However it displays as black.
As you can see, the name "John" shows as black. However, according to the web inspector it should be green.
After tinkering around I found that the issue lies in my use of all: unset;. For some reason, when using all: unset; in one of the parent elements for the <span>, the computed CSS rules goes from:
box-sizing: border-box;
color: rgb(9, 112, 19);
display: inline;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
height: auto;
line-height: 25px;
pointer-events: auto;
width: auto;
to
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
-webkit-box-direction: normal;
-webkit-cursor-visibility: auto;
-webkit-font-kerning: auto;
-webkit-font-smoothing: auto;
-webkit-hyphenate-character: auto;
-webkit-hyphenate-limit-after: auto;
-webkit-hyphenate-limit-before: auto;
-webkit-hyphenate-limit-lines: no-limit;
-webkit-hyphens: manual;
-webkit-line-align: none;
-webkit-line-box-contain: block inline replaced;
-webkit-line-grid: none;
-webkit-line-snap: none;
-webkit-locale: en-US;
-webkit-nbsp-mode: normal;
-webkit-print-color-adjust: economy;
-webkit-rtl-ordering: logical;
-webkit-text-combine: none;
-webkit-text-decoration-line: none;
-webkit-text-decorations-in-effect: none;
-webkit-text-emphasis-color: rgb(0, 0, 0);
-webkit-text-emphasis-position: over right;
-webkit-text-emphasis-style: none;
-webkit-text-fill-color: rgb(0, 0, 0);
-webkit-text-orientation: mixed;
-webkit-text-security: none;
-webkit-text-size-adjust: auto;
-webkit-text-stroke-color: rgb(0, 0, 0);
-webkit-text-stroke-width: 0px;
-webkit-user-modify: read-only;
-webkit-user-select: text;
border-collapse: separate;
box-sizing: border-box;
caption-side: top;
clip-rule: nonzero;
color: rgb(9, 112, 19);
color-interpolation: sRGB;
color-interpolation-filters: linearRGB;
color-rendering: auto;
cursor: auto;
display: inline;
empty-cells: show;
fill: rgb(0, 0, 0);
fill-opacity: 1;
fill-rule: nonzero;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-optical-sizing: auto;
font-size: 13px;
font-style: normal;
font-synthesis: style weight small-caps;
font-variant-numeric: normal;
font-weight: normal;
glyph-orientation-horizontal: 0deg;
glyph-orientation-vertical: auto;
hanging-punctuation: none;
height: auto;
image-rendering: auto;
kerning: 0;
letter-spacing: normal;
line-height: 25px;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
marker-end: none;
marker-mid: none;
marker-start: none;
orphans: auto;
overflow-wrap: normal;
pointer-events: auto;
resize: none;
shape-rendering: auto;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1px;
tab-size: 8;
text-align: start;
text-anchor: start;
text-decoration: none;
text-indent: 0px;
text-rendering: auto;
text-shadow: none;
text-transform: none;
visibility: visible;
white-space: normal;
widows: auto;
width: auto;
word-break: normal;
word-spacing: 0px;
word-wrap: normal;
writing-mode: horizontal-tb;
This is undesired, as the intention of using all: unset; is to REMOVE all existing CSS rules for the element. The reason being that this overlays on-top of an existing website, and as such can inherit CSS rules from the underlying website. I use all: unset; to avoid the underlying websites CSS rules interfering with this application.
If I simply add -webkit-text-fill-color: #097013; to my CSS rules, it will work as intended. But I don't understand why adding all: unset; adds so many CSS rules when it's intention is to remove them.