ardchoille
iPF Novice
- Joined
- Apr 21, 2012
- Messages
- 1,471
- Reaction score
- 446
If you're surfing the web and notice that the Safari top navigation bar (forward/back arrows, URL input box, etc.) seems darker on some websites than it does on others, you're not alone. I'm going to explain why this is happening.
Symptom
While coding a new theme for my website I noticed that the top navigation bar in Safari was darker on my site than on some other sites. It wasn't until I changed the background-color for the body in my CSS file to a lighter color that I realized that this "body" color also affects the appearance of the top navigation bar if you have Reduce Contrast toggled off in settings.
Can the end-user change this?
Not while using Safari. The issue arises from Safari allowing webpage colors to affect the appearance of core Safari UI elements. In the below example the website developer is adding a custom color to the body/wrapper of the web page:
(website CSS file)
body {background-color: #1b2f61;} /* styling for the entire document */
Why does this happen?
What's happening here is that the CSS (Cascading Style Sheet) file for the website tells the browser how to style various elements of the document. The above element, "body", tells the browser how to initially style the entire document, this example initially sets a dark blue color for the entire page. Then the CSS file goes on to tell the browser how to style the various elements such as text, links, headings, etc. Even if the content of the document specifies a light color, e.g. #ffffff, the navigation bar in Safari will still appear dark blue due to the initial styling of the page.
Can we work around this?
The only way I know of to work around this is to toggle Reduce Contrast on in settings:
General > Accessibility > Reduce Contrast, toggle it on
NOTE: The downside to this "workaround" is that this setting will affect items outside of Safari, such as the backgrounds for the drop-down notification panel and the quick settings.
Can Apple solve this problem?
I believe so. Apple merely needs to disallow page content from affecting the appearance of Safari's core UI elements (navigation bar). It's an easy fix but I doubt it's high on Apple's to-do list.
I just wanted to pop in and explain the reasons for the apparent change in Safari's UI.
Symptom
While coding a new theme for my website I noticed that the top navigation bar in Safari was darker on my site than on some other sites. It wasn't until I changed the background-color for the body in my CSS file to a lighter color that I realized that this "body" color also affects the appearance of the top navigation bar if you have Reduce Contrast toggled off in settings.
Can the end-user change this?
Not while using Safari. The issue arises from Safari allowing webpage colors to affect the appearance of core Safari UI elements. In the below example the website developer is adding a custom color to the body/wrapper of the web page:
(website CSS file)
body {background-color: #1b2f61;} /* styling for the entire document */
Why does this happen?
What's happening here is that the CSS (Cascading Style Sheet) file for the website tells the browser how to style various elements of the document. The above element, "body", tells the browser how to initially style the entire document, this example initially sets a dark blue color for the entire page. Then the CSS file goes on to tell the browser how to style the various elements such as text, links, headings, etc. Even if the content of the document specifies a light color, e.g. #ffffff, the navigation bar in Safari will still appear dark blue due to the initial styling of the page.
Can we work around this?
The only way I know of to work around this is to toggle Reduce Contrast on in settings:
General > Accessibility > Reduce Contrast, toggle it on
NOTE: The downside to this "workaround" is that this setting will affect items outside of Safari, such as the backgrounds for the drop-down notification panel and the quick settings.
Can Apple solve this problem?
I believe so. Apple merely needs to disallow page content from affecting the appearance of Safari's core UI elements (navigation bar). It's an easy fix but I doubt it's high on Apple's to-do list.
I just wanted to pop in and explain the reasons for the apparent change in Safari's UI.
