Forum Discussion
Rise shift with transcripts
In Rise, when viewing the transcript that I want to keep open while going through the lesson, the main content block appears to shift after the audio is playing.
Image 1: when you first display the Audio Transcript panel the main content block is centered in the window, as shown below with the “Stress Response” section. There is an even amount of white space on both sides of the content. Then…
Image 2: …when you play the audio, or scroll down the page, after a few seconds the main content shifts to back to the right – behind the audio transcript panel. There is now more white space to the left of the main content and a portion of the text is behind the audio transcript.
Anyone know why this happens or how to avoid this for smaller screens/laptops?
Thanks.
4 Replies
WOW! PhilFoss went above and beyond. I appreciate both of your responses. And am relieved that this bug will likely be fixed in the future but for now, I will not be editing this in order to not risk other issues arising. Thanks again, Fellas!!
I was able to replicate this using an audio transcript. I debug it in this screen recording. From what I can tell, for some reason the class .transcript-panel-enter-done is getting removed prematurely from the transcript panel. Might be part of a larger js issue, as I can't imagine the content and transcript panel always behaved this way. Also a look at a password protected quiz plugin.
That's some great debugging PhilFoss . From what you showed in your YouTube video, here's what I think is happening:
Those class names for me are the giveaway: enter-active / enter-done are react-transition-group conventions, so the panel is a React CSSTransition component. enter-done is meant to persist for the entire time the panel is open and only comes off when an exit transition starts. CSSTransition adds its transition classes directly to the DOM node, not through React's className prop. So when a re-render changes the panel element's own class list (a modifier toggling during playback or on scroll, in this example), React rewrites the whole class attribute and the imperatively added enter-done gets wiped. No reset involved. RTG still believes the transition completed, which is exactly why it never puts the class back, and why the layout stays broken until you close and reopen the panel. A fresh enter cycle re-applies it.
This looks like a Rise layout bug. I’d guess when it first opens, Rise adds an offset to the lesson wrapper so the content column re-centres in the remaining space. Pressing play or scrolling forces a layout recalculation, and that recalculation seems to ignore the open panel, so the content re-centres against the full window width and slides under it. Might be worth testing in Quickshare to see how it responds there. Review 360’s own chrome uses a lot of width so won’t help matters. I’d raise this with support Adding a screen recording might help explain it to them.
