5

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.

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

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

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

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

WORKAROUND

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

16
  • Aaron - those two images look identical to me. What is it you are seeing?
    – Doktor Mayhem Mod
    Commented Sep 14, 2020 at 7:24
  • @DoktorMayhem Appears to be platform/browser specific. Please see edit.
    – Aaron
    Commented Sep 14, 2020 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
    Commented Sep 14, 2020 at 7:51
  • @Aaron For what it's worth, I can't reproduce this on Fedora using Firefox 80.
    – Richard
    Commented Sep 20, 2020 at 20:33
  • I'm able to reproduce on Chrome and Safari on macOS 10.15.7
    – Aaron
    Commented Sep 30, 2020 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
    Commented Sep 30, 2020 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.
    Commented Oct 13, 2020 at 6:09
  • @AndrewT. Not sure I follow. It's image caching on the client side that seems to be the problem.
    – Aaron
    Commented Oct 13, 2020 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.
    Commented Oct 13, 2020 at 6:25
  • @AndrewT. Just to clarify, are you able to reproduce the problem itself?
    – Aaron
    Commented Oct 13, 2020 at 6:27
  • 1
    Yes, repro on Chrome 85 on macOS 10.15.6.
    – Andrew T.
    Commented Oct 13, 2020 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
    Commented Oct 13, 2020 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.
    Commented Oct 13, 2020 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.) Commented Oct 16, 2020 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
    Commented Oct 16, 2020 at 13:34

0

You must log in to answer this question.

Browse other questions tagged .