See end of post for workaround

The following three ABC code samples should be equivalent:

X:0         X:0            X:0
K:C bass    K:Cmaj bass    K:C major bass
A,,B,,C,    A,,B,,C,       A,,B,,C,

However, the first image displays incorrectly if it has been previously displayed and cached by the browser.

To reproduce, if the image immediately below looks correct, reload the page, and it produces the image at the bottom of this post.

K:C bass

Whereas the other two both render correctly regardless whether they were previously cached, as follows.

K:C major bass

The incorrect image looks like this. bad rendering

Reproduced on

Widows 10 (v. 2004) with

  • Chrome 85.0.4183.121 (on 2 machines)
  • Edge 85.0.564.63
  • Firefox 81.0 (on 2 machines; clean install. Behavior is different, however. First time opening page, display incorrect. Okay on refresh.)

MacOS 10.15.7 with

  • Chrome 85.0.4183.121
  • Safari 14.0


Reload the page with a cache bypass. On Windows this is generally done with CTRL+F5; on MacOS, CMD+SHIFT+R.

  • Aaron - those two images look identical to me. What is it you are seeing?
    – Doktor Mayhem Mod
    Sep 14 '20 at 7:24
  • @DoktorMayhem Appears to be platform/browser specific. Please see edit.
    – Aaron
    Sep 14 '20 at 7:39
  • @DoktorMayhem Okay, not browser specific. The problem appears to be in rendering the image when it was previously cached by the browser. I can reproduce on Win10 with Edge and Chrome. Clearing the cache and reloading the page "fixes" the problem.
    – Aaron
    Sep 14 '20 at 7:51
  • @Aaron For what it's worth, I can't reproduce this on Fedora using Firefox 80.
    – Richard Mod
    Sep 20 '20 at 20:33
  • I'm able to reproduce on Chrome and Safari on macOS 10.15.7
    – Aaron
    Sep 30 '20 at 1:20
  • I can also reproduce with Firefox on Windows 10, but the behavior is somewhat different. It seems like the second and/or third time I refresh, the image is "bad" but then it's okay after that.
    – Aaron
    Sep 30 '20 at 1:38
  • I'm not sure there's caching since the staff is generated on-the-fly by the JavaScript on the client's browser, not stored as an image on the server. Maybe buggy interaction between the script and the browser.
    – Andrew T.
    Oct 13 '20 at 6:09
  • @AndrewT. Not sure I follow. It's image caching on the client side that seems to be the problem.
    – Aaron
    Oct 13 '20 at 6:13
  • I'm not sure if ABCjs convert the notation to an image file and cache it (you can't right-click on it and save it as an image). Based on my experiment, it always redraw the notation as an SVG on-the-fly (if it's cached, disabling JavaScript will still show the image)
    – Andrew T.
    Oct 13 '20 at 6:25
  • @AndrewT. Just to clarify, are you able to reproduce the problem itself?
    – Aaron
    Oct 13 '20 at 6:27
  • 1
    Yes, repro on Chrome 85 on macOS 10.15.6.
    – Andrew T.
    Oct 13 '20 at 6:30
  • @AndrewT.Cool. Okay, so if the image itself isn't being cached, can you speculate on why clearing the cache seems to fix the problem?
    – Aaron
    Oct 13 '20 at 6:31
  • 1
    For that specific issue, unfortunately I don't know the reason. I only know that SE is using version 2.3 while ABCjs Editor is using version 5.9, if that's the concern.
    – Andrew T.
    Oct 13 '20 at 6:59
  • Clearing the cache doesn't fix the problem for me, particularly on the sandbox page. (Safari 14.0 on MacOS 10.14.6.) Oct 16 '20 at 13:27
  • @MichaelSeifert Hmm...Your code renders okay for me on Chrome, but only after clearing my cache and refreshing the page. The bug was previously confirmed on Safari 14 with MacOS 10.15.7, so maybe there's even more going on. Do any of the samples on the sandbox page render for you, or is the problem global for all ABC code?
    – Aaron
    Oct 16 '20 at 13:34

You must log in to answer this question.

Browse other questions tagged .