Images (image-button-response) not displaying on Safari on cognition.run

[hauselin]

Hi, I'm testing a study on cognition.run on Chrome/Firefox/Safari.

For some reason, on Safari, my images are not showing up on cognition.run when I use the image-button-response plugin (I've preloaded them in jsPsych.init). The buttons do show up though, so what I'm seeing is just the buttons but no image. I don't have this problem on Chrome/Firefox. It's also not an issue on any browser when I run the experiment locally. Weirdly enough, when I use the instructions plugin to show the images instead, the images do show up on Safari on cognition.run.

So it's the combination of cognition.run + Safari + the image-button-response plugin that causes the problem. I've replicated it on two different computers too.

I really appreciate any help anyone can provide. Thanks!

Edit: If it helps, here's jsPsych's jspsych-image-button-response.html example on cognition.run. Images aren't showing on Safari but show on other browsers. https://m8seoragzv.cognition.run/

[becky-gilbert]

Hi @hauselin, I'm not sure, but this might be related to a bug that we're aware of with the image-* plugins in v6.2. Could you try setting render_on_canvas: false in all of the image trials, and see if that helps? (Sorry, I'm not able to test on Safari right now).

[hauselin]

Thanks, @becky-gilbert! Yes, setting render_on_canvas: false fixed the problem. Do you think changing this from true (default) to false might inadvertently cause other problems? I'll test it a bit more.

Also, in the link to the task on cognition.run above, I've also printed whether it's set to true or false on each image trial so you can take a look it if you wanted to.

Thanks again!

Edit: The images seem to show up much slower than on Chrome/Firefox.

[becky-gilbert]

Great, thanks for checking and letting us know!

It sounds like this might be an issue with preloading and/or caching in Safari. You could try looking at the network tab in Safari to check that the image files are all loading when the experiment starts, and not loading again when each trial starts. I just checked in Chrome and the preloading seems fine. If it does look like there's a problem with preloading/caching in Safari, it'd be great if you could post it in an issue so that we can track it.

Setting render_on_canvas to false means that the image will be presented in an img element instead of drawn onto a canvas element. Drawing images on a canvas element helps prevent a brief white flash between consecutive (no ITI/post_trial_gap: 0) images presentations in Firefox. So if you use render_on_image: false, then you might notice a flash between the first set of images in your demo cognition.run task, but only in Firefox. The problem with images not displaying at all with render_on_canvas: true will be fixed in v6.3, which will be released in a few days. But that won't fix the problem with images appearing more slowly in Safari, since I'm pretty sure that's a preloading or caching issue.

[hauselin]

I just tested it on Firefox and Safari. Both are preloading images properly but there might be caching problems with Safari (or related problems). Like what you had guessed, Safari is reloading the images on every trial even though it had successfully preloaded them images at the start. I'll post an issue.

Thanks for explaining how render_on_canvas works. I have ITIs in many of my studies, so setting it to false won't be an issue for now. But I'm glad v6.3 will address this. Thanks again for the amazing work!