Inconsistent positions of slider labels

Online experiments
1

URL of experiment: https://run.pavlovia.org/Wake/pm-images/

Description of the problem: When I first tried a slider online (using 2020.2.5 I think), and added ticks as (0,10, 20, 30, 40, 50,60,70,80,90,100) and labels as "0%","50%","100%" the 0% and 100% appeared above the 10 and 90. Since I couldn’t work out how to move them, I just edited the numbers to 10% and 90%.

On another experiment (with 2020.2.10) the labels appeared in the correct position. However, every 10-14 trials I’m inserting an extra routine in the loop. On this copy of the trial routine, the positions have switched back. I tried deleting and reinserting the slider component (copied from the first routine) with no luck.

The JS code for the sliders seems to be:

funny_slider = new visual.Slider({
    win: psychoJS.window, name: 'funny_slider',
    size: [0.6, 0.03], pos: [0, (- 0.3)], units: 'height',
    labels: ["0%", "50%", "100%"], ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    granularity: 0, style: [visual.Slider.Style.RATING, visual.Slider.Style.TRIANGLE_MARKER],
    color: new util.Color('DarkGray'), 
    fontFamily: 'HelveticaBold', bold: true, italic: false, depth: -1, 
    flip: false,
  });

and

funny_slider_2 = new visual.Slider({
    win: psychoJS.window, name: 'funny_slider_2',
    size: [0.6, 0.03], pos: [0, (- 0.3)], units: 'height',
    labels: ["0%", "50%", "100%"], ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    granularity: 0, style: [visual.Slider.Style.RATING, visual.Slider.Style.TRIANGLE_MARKER],
    color: new util.Color('DarkGray'), 
    fontFamily: 'HelveticaBold', bold: true, italic: false, depth: -1, 
    flip: false,
  });