Change CSS for .jspsych-content to fix (RDK doesn't work with resize plugin) and other issues.

[becky-gilbert]

See recent comments in #787.

[gorkemer]

Hey everyone,

Hey @vijaymarupudi, thanks for chipping in! I'd also note that including canvas.style.position = 'block'; shifts the canvas slightly to the right, leaving empty (display_element) space at left border. I'm attaching a photo of that here. I changed the background color of the canvas to orange to see its size. That only resolved when canvas.style.position = 'absolute'; is put back in. However, as discussed, that adjustment disrupts the positioning of the canvas within the window after using the resize plugin. Would there be any other solutions to achieve an appropriate canvas display without tackling this slight-shift-to-the-right issue (with position = block) or a misaligned-canvas-size issue (with position=absolute)?

Görkem

1- canvas is shifted to the right with canvas.style.position = 'block';

2- canvas origin (0,0) becomes the center of the window after full-screen, and resize plugins (and virtual-chin-rest)

2a- after fullscreen

2b- after resize plugin

[vijaymarupudi]

Could you provide a branch with your examples, @gorkemer? I'd love to try to debug this issue.

[gorkemer]

I created one here. That includes the experiment.html which I used for capturing the above photos. It allows for full-screen and resizing, and canvas position is set to block in the RDK plugin - canvas.style.position = 'block';

[vijaymarupudi]

It's canvas.style.display not canvas.style.positioning btw!

The problem is that .jspsych-content has a max width of 95%.

The comment (git blame: 6d3da21) says that it is an IE 10-11 fix, I'm not sure why exactly.

 .jspsych-content {
   max-width: 95%; /* this is mainly an IE 10-11 fix */
   text-align: center;
   margin: auto; /* this is for overflowing content */
 }

if you remove that and add display: block, it works well for me.

[vijaymarupudi]

Code here: https://github.com/vijaymarupudi/rdk_canvas_resizing/tree/canvas_position_issue

[gorkemer]

Thanks for the troubleshooting @vijaymarupudi! I can confirm that this solved my issue. I think this issue should be noted inside the RDK plugin. Otherwise, when the RDK plugin is used with other JsPsych plugins, e.g. to produce a fixation cross, the center of that trial (e.g. fixation cross) and the center of the RDK is not aligned, e.g. fixation cross by the RDK shifts to the right.

[jodeleeuw]

👍 We will find a general patch for this for 7.0.

[vijaymarupudi]

No problem, glad to help :)

[jodeleeuw]

This will be a breaking change for existing experiments so I am adding this to 8.0

[jodeleeuw]

See also #3056 for related issue with canvas plugins