Skip to main content Skip to footer

How to Fix the Wijmo Glyph Bug in Chrome for macOS

We're sorry to say that we introduced a minor glyph bug in build 403. In Chrome for macOS, 4 of the wijmo glyphs do not render correctly. The broken glyphs are: calendar, clock, minus, plus. The bug is fixed in build 405 and after.

Broken glyphs: How broken glyphs appear in macOS Chrome

Glyphs: Corrected Glyphs

Cause of broken glyphs

We changed these glyphs to use Unicode characters that were not supported in Chrome for macOS. So we have to roll back that change.

Fix It

We've fixed this bug in our source code, but it'll be a little while before we release our next build (officially). If you'd like to test our latest code, you can always get one of our nightly builds: http://prerelease.componentone.com/wijmo5/

We realize the urgency of this issue and want you to be able to patch this yourself immediately. Here's the code needed to fix this bug. Place this code in a stylesheet or style block in your application. Make sure this is placed AFTER the wijmo.css file in your page.

  .wj-glyph-calendar {
    top: .2em;
    width: 1em;
    height: 1em;
    border: .1em solid;
    border-top: .3em solid;
  }

  .wj-glyph-calendar:after {
    position: absolute;
    font-size: 50%;
    left: .5em;
    content: '1';
  }

  .wj-glyph-clock {
    width: 1em;
    height: 1em;
    border: .13em solid;
    border-radius: 50%;
  }

  .wj-glyph-clock:after {
    position: absolute;
    border-left: .1em solid;
    border-bottom: .1em solid;
    width: .3em;
    height: .4em;
    top: .05em;
    left: .32em;
    content: "";
    font-weight: inherit;
  }

  .wj-glyph-plus,
  .wj-glyph-minus {
    border-top: .25em solid;
    width: .9em;
    top: -.2em;
  }

  .wj-glyph-plus:after {
    position: absolute;
    box-sizing: border-box;
    border-left: .25em solid;
    width: .25em;
    height: .85em;
    left: .32em;
    top: -.55em;
    content: "";
    font-weight: inherit;
  }

  .wj-glyph-minus:after {
    content: "";
    font-weight: inherit
  }

See the fix for yourself in this jsfiddle: http://jsfiddle.net/uewtb58u/

This code will override the bad glyphs in build 403. You will not need to use this fix for any other version than build 403.

Again, we're sorry for any inconvenience this may cause.

Chris Bannon - Global Product Manager

Chris Bannon

Global Product Manager of Wijmo
comments powered by Disqus