Interestingly, this only happens when the slider is shown after the first time. And if I exit the full screen mode, the labels get aligned properly (see the figure below).
But it’s not ideal. And I don’t want to encourage my subjects to exit the full screen during the experiment just in order to fix this label misalignment issue. So I hope this problem can be fixed soon.
I’ve come across this – including an instance where one slider was fine but another apparently identical slider was not.
In one instance I’ve put 10% and 90% to reflect where the labels actually appear, instead of 0% and 100% as desired, though I like your arrow solution too.
The alternative (which I’ve also used) is separate text components for the labels – a pain but it works.
This fires psychoJS.window.adjustScreenSize() which requests a fullscreen transition from the browser
At the same time, experimentInit() sets up the Slider, and at some point, calls _estimateBoundingBox()
In _estimateBoundingBox(), this._tickPositions_px is set using tickPositions.map()
tickPositions.map() uses to_px() with a this._win argument
BUG OCCURS HERE:to_px() uses this._win.size to convert tickPositions from PsychoPy dimension units to browser pixel units
Finally, the initial label positions, this._labelPositions_px, are set from this._tickPositions_px
The problem at Step 6 is that this._win.size represents the current window size. At this point, this._win.size may still be the pre-fullscreen window size, so the labels are placed in the correct positions for the pre-fullscreen window. However, once post-fullscreen, the labels will be in the wrong positions.
The main issue is that Step 2 is async, so it cannot be guaranteed which state the window is in.
You can easily reproduce the bug by:
Option 1: Make your window very small before pressing Ok on DlgFromDict. Once fullscreen, the labels will be grouped in the center of the window. This is because this._win.size is small.
Option 2: Wait until fullscreen is achieved, and then fire experimentInit() again. This re-initializes the Sliders, and the labels will be in the correct positions.
Option 3: Manually fullscreen the window before pressing Ok on DlgFromDict. The labels will be in the correct positions because the window size has not changed
Possible fix:
Add a timeout between closing DlgFromDict and triggering Scheduler.Event.NEXT. In DlgFromDict > close: function() ...:
Replace (line 288 on GitHub): self._dialogComponent.status = PsychoJS.Status.FINISHED;
With:
This sets a timeout for 2000ms before continuing. In my quick testing, a minimum of around 500ms seemed to work too, but 2000ms hopefully gives some buffer space without making the experiment appear to be frozen.
(I tried a fix that listened for the fullscreenchange event, but at least in my quick testing, it still required a delay to guarantee the resize was complete)
