Chrome on macOS fails to display elements with large CSVs

[cuzn]

Hi everyone!

We are conducting an experiment where participants estimate the proportion of black or white dots by interacting with a horizontal slider bar after seeing a display of black and white dots. After making their selection, participants are shown the true proportion with a red vertical bar, and a continue button appears below the horizontal slider.

However, in Chrome on macOS, the experiment fails to display the red vertical bar and the continue button. This issue does not occur in Firefox, Safari on macOS/Windows, or Chrome on Windows. The experiment includes ~990 trials with images totaling 60 MB.

We found that if we reduce the number of displays (rows) in the CSV file to 750, the issue disappears even in Chrome on macOS. This suggests the problem might be related to the CSV length or overall memory usage in Chrome on macOS. However, we have not been able to pinpoint the exact cause.

Here is the demo link: https://farm.pcibex.net/r/JSgIOF/

Steps We Have Tried:
1. Reducing Image Size:
We lowered the image DPI and compressed images to reduce the total file size to 45 MB. Despite this optimization, the issue persists.
2. Splitting the Experiment into Blocks:
We divided the trials into smaller groups (e.g., multiple CSV files or separate blocks) and loaded them sequentially. This approach did not resolve the issue when the total number of trials exceeded ~750 rows.

Specific Questions:
1. Is there a known limit in PCIbex, Chrome, or macOS that might explain this issue?
2. Are there platform-specific memory constraints or rendering quirks in Chrome on macOS that could cause this behavior?
3. Is there a recommended workaround for handling a large number of trials or large image sets in this specific environment?

Thanks for any help!

[Author]

Posts