Search code examples
htmlcsssafari

Codepen Text Disappears on Safari Browser

I have a website which displays text fine on Chrome.

https://codepen.io/Teeke/pen/RwJeQxX

I've opened it on two Macs with Safari. Text from project-link span comes up white colour. Invisible. Safari seems to count the link as click or activated.

<a class="project-link" href="https://www.patreon.com" target="_blank">3,000TWD for a hydroponic farm </a></span>

For project-link, I've just used standard link web-styling.

.project-link:hover {
  color: #181;
}

.project-link:visited {
  color: #114;
}

.project-link:active {
  color: purple;
}

The visited and hover states may be automatically activated by Safari.

Do I need to use vendor prefixes?

Would CSS Reset or Normalize work for cross-browser compatibility?

Solution

  • The 'C' in css is 'cascade' - in other words the order of your declarations, and their specificity matters. You currently have

    .project-link:hover {
   color: #181;
}

.project-link:visited {
    color: #114;
}

.project-link:active {
    color: purple;
}

a {
    color: #fefefe;
}

    any tag attribute is more specific than a class tag