eatyourgreens
commented
1 week ago FWIW: I tried to see whether this was specific to the Transcription Task, or if there were other weird Firefox-specific 'page jump' issues. Here's an example from Science Scribbler (note change in image size between marking + question task). NB I don't think this is related (it happens on Chrome, too), but wanted to share just in case, since it seems like an odd thing to happen (not sure why subject image size would change mid-classification):
This is caused by the viewer layout changing when you move from one task to another (which is weird because the viewer styling is supposed to be independent of the task.) Watch how grid-template-columns changes here. In particular, the width of the first column changes from 90px (drawing task) to 75px (question task.) The subject controls are switching into small-screen layout for some reason.
https://github.com/user-attachments/assets/a38a4159-18d8-46e3-b032-a5514ec9799b
The height of the task navigation buttons, and the width of the subject controls (play button etc.) change from the drawing task to the question task. Design and layout should be consistent!
EDIT: the drawing tasks (drawing and transcription) modify the subject viewer by adding and removing an SVG <rect> that acts as the drawing canvas. The layout is changing when that rectangle is removed, so maybe that is causing the bug?
Instead of adding and removing that rectangle, it might be better to deactivate it by adding the inert attribute in modern browsers.
FWIW: I tried to see whether this was specific to the Transcription Task, or if there were other weird Firefox-specific 'page jump' issues. Here's an example from Science Scribbler (note change in image size between marking + question task). NB I don't think this is related (it happens on Chrome, too), but wanted to share just in case, since it seems like an odd thing to happen (not sure why subject image size would change mid-classification):
https://github.com/user-attachments/assets/64440326-f251-480c-8d8d-e5c0120680e3
Originally posted by @snblickhan in https://github.com/zooniverse/front-end-monorepo/issues/6271#issuecomment-2334725408
EDIT: after some playing around in the project builder, I was able to reproduce this by checking the 'limit subject height' box for a workflow (https://github.com/zooniverse/front-end-monorepo/issues/6275#issuecomment-2340572097.) Checking that box styles the image with
max-height, which means the image height can vary during a workflow, as long as it never exceeds the maximum. Styling the image withheightfixes this bug.