The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.With CM_Theme updated now on https://community.channelaustin.org the Arrow icons in the menu bar as well as the icons for bullet points are not displaying properly in the Safari browser
However, using the Safari browser is displaying the menu arrows correctly on the OKV site
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | funny_character_screenshot.jpg | 235.08 KB | stefanwray |
| ArrowIcon_safari_okv.jpg | 6.66 KB | stefanwray | |
| ArrowIcon_Safari.jpg | 9.06 KB | stefanwray |
Comments
Comment #1
westis commentedThis is working when CSS aggregation is on. Probably it's some kind of encoding issue when the file is sent as is over http, that is fixed when the server has created a new, cached file.
Comment #2
bagelche commentedI have the same issue with Safari (but not with Firefox or Chrome). Activating "CSS aggregation and compression" resolved the issue for me as well–both on menu arrows and and bullet points.
Comment #3
stefanwray commentedThis same problem has reappeared on community.channelaustin.org. Was not happening October 31. Now is happening on November 1.
Comment #4
stefanwray commentedThis same problem has reappeared on community.channelaustin.org. Was not happening October 31. Now is happening on November 1.
What did you do before to temporarily resolve this? I'm wondering why it reappeared.
Comment #4
stefanwray commentedThis same problem has reappeared on community.channelaustin.org. Was not happening October 31. Now is happening on November 1.
What did you do before to temporarily resolve this? I'm wondering why it reappeared.
Comment #5
kreynen commentedWhile the root cause of the issue still needs work, the reason this would reappear should be pretty obvious. If turning CSS caching on makes the problem go away... that's the first thing to check.
Comment #6
kreynen commentedComment #7
libkuman commentedComment #8
libkuman commentedComment #9
limako commentedThis is a problem with the sass generated navigation.css files, e.g. http://stackoverflow.com/questions/10363506/sass-prepends-incorrect-char...
I'm not sure why it happens/happened, but the problem can be corrected by changing the first line of navigation.css from:
@charset "CP850";
to:
@charset "utf-8";
Comment #10
kreynen commentedComment #13
stefanwray commentedThe issue appears to be partially fixed. The character for a "bullet" is still a funny character
Take a look at the file funny_character_screenshot_0.jpg
Comment #14
stefanwray commentedComment #15
westis commentedstefanwray: On what page do you see this issue? If you refer to a URL it's easier to find out what CSS in what file is causing the issue. I don't have Safari, so can't easily reproduce it.
Comment #16
stefanwray commentedwestis the problem can be viewed on this page
http://community-dev.channelaustin.org
when viewed with the Safari browser
the problem exists only if when you go to
/admin/config/development/performance
the Aggregate and compress CSS files is NOT checked.
when Aggregate and compress CSS files is checked
then the bullet point next to Read Me is a bullet point
I have Aggregate and compress CSS files is NOT checked now so if you are able to find or see a Safari browser you'll see the problem
Comment #17
kreynen commented@westis this is only an issue if CSS aggregation is off. If you look at the change @limako made in http://cgit.drupalcode.org/cm_theme/commit/?id=b23cd76, we just need to check all .css files to ensure that they start with @charset "utf-8"; and make whatever changes necessary to the sass files so it stays that way.
The bullet issue is likely something like http://stackoverflow.com/questions/2526033/why-specify-charset-utf-8-in-...
This CSS issue isn't limited to cm_theme. According to the CSS spec (http://www.w3.org/TR/CSS2/syndata.html#charset), the .css file "must be encoded by a character encoding that supports the set of characters available in US-ASCII (e.g., UTF-8, ISO 8859-x, SHIFT JIS, etc.)".
I think the issue may be a combination of your Compass configuration and the use of non utf-8 characters in .css. See https://github.com/sass/sass/issues/620 and https://groups.google.com/forum/#!topic/sass-lang/lHpKGGi9eWY.
While most browsers figure this out Safari (in the Mac computer, iPads, and iPhones) all fail to render this properly when CSS caching is off.
Comment #18
westis commentedThanks for details! The dev version of normalize.css (where the dot comes from) has UTF-8 set. But on http://community-dev.channelaustin.org it's @charset "CP850";
It was fixed in http://cgit.drupalcode.org/cm_theme/commit/cm_theme_zen/css/normalize.cs.... Must have been something a long time ago that introduced the wrong charset.