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.

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.

@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.

@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.

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

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

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

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

Glad to hear it!