Safari Rendering only Black text

[Jesse_Green]

I’m working on a site and the client recently pointed out that all text is showing up black whenever they load the site. The issue seems to be isolated to an older version of Safari they were running as an update fixed the issue, but they’ve received a handful of notes from other visitors testing the site indicating there may be a bigger issue. Chrome, latest version of Safari and mobile browsers don’t seem to present the issue.

Anyone have any ideas what might be causing this? It’s a new issue that only started in the past week or so. They have been previewing a staging site for months on the older version of Safari with no issues. The only significant change made on my end was adding a custom domain.

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[cyberdave (Dave S.)]

Hi @Jesse_Green, thanks for your post. Welcome to the community.

Would it be possible for you to help share the published url/link to the page which is showing how things are currently?

It is also helpful to share the read-only link to the project

Thanks in advance

[Jesse_Green]

Thanks, @cyberdave .

I can’t share the full project, but here’s a staging link to the page referenced in the screenshots.

One possible cause and curious your thoughts:
I have a page I created that is basically holding some default heading types that are all using #333. When I was building each page I assigned one of those headings and then changed colors as I built each page. Is it possible that certain browsers are only reading the default #333 applied to the original heading style and not the colors that I’m overriding with in the designer?

[cyberdave (Dave S.)]

Hi @Jesse_Green thanks for the info. Could you let me also know the version of Safari that is not working? I can help to check on browserstack that version.

[Jesse_Green]

@cyberdave

Here’s what the client sent me. (12.1.2)

The issue went away for them as soon as they updated from this version.

[cyberdave (Dave S.)]

Hi @Jesse_Green, one thing I noticed is that you are havng your class name begin with an underscore, I would rename the clase so that it starts with an alpha/numeric character instead of the underscore:

_2-column-hero-heading

Change that to

2-column-hero-heading

and republish, let me know when done and I can help to check further. This might not be the issue here, but I have seen where sometimes having a class start with underscore has caused issues in some browsers in the past.

[Jesse_Green]

@cyberdave

Interesting - I don’t see underscores included in my class names and certainly didn’t include them by default when creating each class. Is there a reason they would be publishing that way even if I didn’t write them that way?

[cyberdave (Dave S.)]

Hi @Jesse_Green, thanks for your reply, I think there has been some trouble with the style there.

I would do the following:

1. Delete the styles on the text
2. Create a new style with different name
3. After styles set as needed, republish the site
4. Check again

I did a preliminary test of the render and changing the style name by creating a new style seems to fix the trouble with the class name. If you are not seeing an underscore in the designer, there might have been some style corruption somehow when creating the style or something did not get saved correctly.

As the Designer of a site project and making Design changes, it is often helpful to first try the following steps:

– Try to reproduce the behavior while using Webflow in Incognito mode/Private window mode with browser extensions turned off.

– If the problem persists, please take a screenshot of your Browser Error Console reply to this email and include that screenshot for our team. A good screenshot tool that Webflow uses is Cloudapp.

– It may be helpful to disable the browser cache so that updated files are always downloaded instead of pulling old content from browser cache.

Only Google Chrome or Apple Safari browser works for the designer, so one thing is to try another browser to see if that helps to isolate the issue root cause of what happened with the style.

For now, just deleting the affected styles and recreating then republish should help.

[Jesse_Green]

@cyberdave Thank you for the recommendation and help troubleshooting.

As this is a site wide issue (literally every text block is black on that particular version of Safari) does that mean I will need to delete and create a new name for every text block on the site?

[dannyFig (Danny Figueroa)]

@cyberdave ~ Disabling the browser cache. Awesome! Thank you. Didn’t know I could do that. Very helpful.

[cyberdave (Dave S.)]

Hi @Jesse_Green, well, I am not sure that will correct the text issue showing on the older safari, have you already made the one change and then check that?

I was doing some checking and you can also rename the class on the affected style, that will affect all instances on the site which are using that style, so you only have to make the update a single time.

On the class name, use the dropdown menu and select Rename class, then give the class a new name.

As to other elements, can you help to show what those are which are having this same text issue? I only saw the issue with the underscore on a single class name.

[Jesse_Green]

@cyberdave I’ve been doing more testing and essentially what appears to be happening is all color styles on existing elements are being ignored and all text on page is inheriting the default color style applied to the Body (#333) When I change the color on Body style all text elements on the page update to reflect the change.

Simply renaming the class on existing elements is not addressing the issue for me, unfortunately. If you look at the same staging link now on older versions of safari (13 and below) and inspect the headline class you’ll see it’s renamed as .testclass with no underscore, but the text is still black which is being inherited from the Body tag.

However, if I create net new element on the page it IS inheriting the correct color style and not defaulting to the body style.

I’m really at a loss here…

Here’s a link to another page where you’ll be able to see that every text element is defaulting to the body style on Safari 13 and below.

[cyberdave (Dave S.)]

Hi @Jesse_Green, thanks a lot for the informative update. I am helping to check, that is strange behavior for sure.

Thanks for providing the detail.

[Jesse_Green]

@cyberdave OK I’ve pinpointed the issue, but I don’t know how to fix it.

Every major section on the site is wrapped in a class called .section

Within .section is this property:
-webkit-text-fill-color: inherit;

If I turn that off in the safari web inspector all color styles render correctly.

Is there a way for me to republish the site with that property not included in the CSS?

[cyberdave (Dave S.)]

Hi @Jesse_Green, well one thing you can do right away is to use a custom css style in the head of your site or page:

<style>
.section {
  -webkit-text-fill-color: white;
}
</style>

This will set the text color to white, or you might also try “currentColor” as a value to see if that works.

Here is how to add custom code: Custom code in head and body tags | Webflow University

After adding the style tag to the custom code section of the Head, then republish the site to check results.

Seems there is more informaton on this particular styling using the text fill: Adding Stroke to Web Text | CSS-Tricks - CSS-Tricks

Let me know how that goes.

[Jesse_Green]

@cyberdave VICTORY

Adding this to head of entire site has resolved the problem:

<style>
.section {
  -webkit-text-fill-color: initial;
}
</style>

Thank you for your help!