CSS updates for v8

.changeset/proud-stingrays-wonder.md

@@ -0,0 +1,5 @@
+---
+"jspsych": major
+---
+
+Removed `max-width: 95%` CSS rule on the `.jspsych-content` `<div>`. This rule existed to address an old IE bug with flex layouts.

.changeset/rich-cups-roll.md

@@ -0,0 +1,7 @@
+---
+"@jspsych/plugin-canvas-button-response": patch
+"@jspsych/plugin-canvas-keyboard-response": patch
+"@jspsych/plugin-canvas-slider-response": patch
+---
+
+Change canvas display to `block` to fix issues when canvas is full screen.

packages/config/package.json

@@ -42,7 +42,7 @@
     "@types/gulp": "4.0.10",
     "@types/jest": "29.2.3",
     "alias-hq": "github:bjoluc/alias-hq#fix-jest-plugin",
-    "canvas": "2.10.2",
+    "canvas": "2.11.2",
     "esbuild": "0.15.14",
     "gulp": "4.0.2",
     "gulp-cli": "2.3.0",

packages/jspsych/src/index.scss

@@ -30,7 +30,6 @@
 }
 
 .jspsych-content {
-  max-width: 95%; /* this is mainly an IE 10-11 fix */
   text-align: center;
   margin: auto; /* this is for overflowing content */
 }
@@ -73,7 +72,6 @@
   margin-left: auto;
 }
 
-/* borrowing Bootstrap style for btn elements, but combining styles a bit */
 .jspsych-btn {
   display: inline-block;
   padding: 8px 12px;
@@ -123,10 +121,11 @@
   width: 100%;
   background: transparent;
 }
+
 .jspsych-slider:focus {
   outline: none;
 }
-/* track */
+
 .jspsych-slider::-webkit-slider-runnable-track {
   appearance: none;
   -webkit-appearance: none;
@@ -138,6 +137,7 @@
   border-radius: 2px;
   border: 1px solid #aaa;
 }
+
 .jspsych-slider::-moz-range-track {
   appearance: none;
   width: 100%;
@@ -148,6 +148,7 @@
   border-radius: 2px;
   border: 1px solid #aaa;
 }
+
 .jspsych-slider::-ms-track {
   appearance: none;
   width: 99%;
@@ -158,7 +159,7 @@
   border-radius: 2px;
   border: 1px solid #aaa;
 }
-/* thumb */
+
 .jspsych-slider::-webkit-slider-thumb {
   border: 1px solid #666;
   height: 24px;
@@ -169,6 +170,7 @@
   -webkit-appearance: none;
   margin-top: -9px;
 }
+
 .jspsych-slider::-moz-range-thumb {
   border: 1px solid #666;
   height: 24px;
@@ -177,6 +179,7 @@
   background: #ffffff;
   cursor: pointer;
 }
+
 .jspsych-slider::-ms-thumb {
   border: 1px solid #666;
   height: 20px;
@@ -187,7 +190,7 @@
   margin-top: -2px;
 }
 
-/* jsPsych progress bar */
+/* progress bar */
 
 #jspsych-progressbar-container {
   color: #555;
@@ -199,10 +202,12 @@
   width: 100%;
   line-height: 1em;
 }
+
 #jspsych-progressbar-container span {
   font-size: 14px;
   padding-right: 14px;
 }
+
 #jspsych-progressbar-outer {
   background-color: #eee;
   width: 50%;
@@ -212,13 +217,14 @@
   vertical-align: middle;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
+
 #jspsych-progressbar-inner {
   background-color: #aaa;
   width: 0%;
   height: 100%;
 }
 
-/* Control appearance of jsPsych.data.displayData() */
+/* Appearance of jsPsych.data.displayData() */
 #jspsych-data-display {
   text-align: left;
 }

packages/plugin-canvas-button-response/src/index.ts

@@ -108,6 +108,7 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
     canvasElement.id = "jspsych-canvas-stimulus";
     canvasElement.height = trial.canvas_size[0];
     canvasElement.width = trial.canvas_size[1];
+    canvasElement.style.display = "block";
     stimulusElement.appendChild(canvasElement);
 
     display_element.appendChild(stimulusElement);

packages/plugin-canvas-keyboard-response/src/index.ts

@@ -81,6 +81,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     // draw
     display_element.innerHTML = new_html;
     let c = document.getElementById("jspsych-canvas-stimulus");
+    c.style.display = "block";
     trial.stimulus(c);
     // store response
     var response = {

packages/plugin-canvas-slider-response/src/index.ts

@@ -169,6 +169,7 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // draw
     let c = document.getElementById("jspsych-canvas-stimulus");
+    c.style.display = "block";
     trial.stimulus(c);
 
     var response = {