Best Answer

Safari Not Reading Custom CSS

  • 27 April 2022
  • 7 replies
  • 630 views

I’m testing my custom layouts/code in different browsers. One of the issues I’ve run into is that Safari doesn’t use certain pieces of my custom code. Specifically, the code concerning styling of specific pages (example: #doc-page-209) is skipped/ignored. However, all other custom CSS is applying correctly.

Is this a known bug? is there are work around or some additional code I need to apply just for Safari?

icon

Best answer by gstager 28 April 2022, 15:13

View original

7 replies

Userlevel 7
Badge +5

Tough to fully answer without the specifics but I am going to suggest that you’ll need to add some sort of appropriate code based on what you’re trying to modify.

-webkit-appearance: none;

If you’re willing to share one specific block - I could try to reproduce and troubleshoot.

Userlevel 7
Badge +3

Agree, it would be great to see examples of blocks that are not working. Not all browsers support all CSS, sometimes workarounds are needed, or you need to change importance levels or other items to make work the same, but it is very conditional on the exact item you are trying to use.

Here is the specific code:

#doc-page-209 {
background-color: #23395D;
color: white;
}

Oddly, this code code does work:

#doc-page-209 .htmlwidget {
background-color: #23395D !important;
}

#doc-page-209 .wrapper-shadow {
box-shadow: none !important;
}

Although now that I look at it, I wonder if the lack of “!important” tag is the culprit? Other browsers apply the blue background without it.

Userlevel 7
Badge +5

@natticatt

Let’s give this a shot…

Here is my hypothesis

Safari is fussy and would not apply the background color to the ng-component element so it was necessary to target the div element which Safari would recognize.

/** Adjust background color of a specific page **/

#doc-page-209 div.pages-widget-page {
background-color: #23395D;
color: white;
}

Hope this works for you.

Userlevel 7
Badge +5

@natticatt - In your code that does work above - notice that you are targeting specific classes underneath the element with the ID of doc-page-209 and so Safari could do it.

The one that doesn’t work does not target anything specific underneath it. I think Safari just needed a little more “direction” where other browsers may have been more “understanding”.

So I just went a step down and hit the div and class right underneath. I could see in the inspector that the dimensions were the same.

Here is the specific code:

#doc-page-209 {
background-color: #23395D;
color: white;
}

Oddly, this code code does work:

#doc-page-209 .htmlwidget {
background-color: #23395D !important;
}

#doc-page-209 .wrapper-shadow {
box-shadow: none !important;
}

Although now that I look at it, I wonder if the lack of “!important” tag is the culprit? Other browsers apply the blue background without it.

 

You were absolutely right! This solution worked like a charm.

Userlevel 7
Badge +5

You were absolutely right! This solution worked like a charm.

Glad to hear it!

Reply