infinite loop when resizing codecast with the new experience edx GUI

[remisharrock]

there is an infinite loop resizing codecast with the edx new experience. I guess codecast is "calculating" somehow its size to get rid of the right scrollbar maybe ? But with the new edx experiement, the height of the codecast seems to increase indefinitely as shown here :

[mblockelet]

A first look at it seems to suggest that the edX new experience JavaScript tries to resize the iframe to match the document being displayed, but that resizing causes codecast to resize as well to adjust to the new iframe size, and then it just loops between them.

I'll try to have a better look at it later.

[mblockelet]

Hi,

I found the reason of the issue and a fix for now, that you can see on : https://learning.edx.org/course/course-v1:Dartmouth_IMTx+DART.IMT.C.01+1T2020/block-v1:Dartmouth_IMTx+DART.IMT.C.01+1T2020+type@sequential+block@a6bbcb493e744d1bae6d87f054668753/block-v1:Dartmouth_IMTx+DART.IMT.C.01+1T2020+type@vertical+block@9d42fab7f1494c9b967893fad5074ec0

Just a question : what is the timeframe about the new edX experience availability to learners? It seems it is not very polished yet :) If possible I would submit feedback that their new way of doing things is not great for the reasons I'll explain below.

Fixing the issue : it was not really related to codecast, but just to the integration, and I fixed it by modifying the HTML content of the block. No modification was done to codecast. The iframe tag was :

<iframe title="a codecast is displayed here" src="https://codecast.france-ioi.org/v6/player?..." marginwidth="0" scrolling="yes" allowfullscreen="true" style="background: #FFFFFF; padding-center: 10px; height: 100vh;" frameborder="0" width="100%"></iframe>

and I changed, in style, the height attribute to height: 900px; instead of height: 100vh;.

The reason why the issue is happening : height: 100vh; makes the iframe have the height of the user's browser, which works in the current edX experience. However, in the new experience, for some reason they use a global iframe (which makes the interface even heavier on resources...). Because of that, height: 100vh; makes the codecast iframe get the height of the global iframe, but then the global iframe resizes to fit the content, which makes an infinite loop. It means that we need to have a fixed height on the iframe so that this infinite loop doesn't happen. It also means that it's not possible to adjust the height depending on the user's browser, as we don't have that information anymore from within that global iframe that they added in the new experience.

You will probably need to edit all codecast blocks to change the variable height to a fixed height, so that they work on the new experience.

You'll also notice that on the new experience, we get the dreaded scrollbars on the codecast iframe (which we don't on the current one). Please tell me when the new experience is closer to being deployed, so that we see if the scrollbar issue is still present then.

[remisharrock]

Thank you @mblockelet ! we will inform edx with @EllaHa

[marcotuts]

Hello! I wanted to follow up here directly, I'm working on the new learner sequence experience at edX. We are planning to announce the release in 2-4 weeks, we are still wrapping up some additional features and monitoring performance currently.

It looks like this issue was resolved, or at least I'm seeing the experience load in the new location. I'm also no longer seeing the scrollbar issue that was cited, perhaps that was a part of our cleanup efforts.

Any other active items or issues you'd like to call out please feel free to submit via the feedback form / trackign tool we are using here: https://docs.google.com/forms/d/e/1FAIpQLSdlD89FjMG1J_J8ZqlmwPnDLoXaxDivdLMez_SBImfb6eDrRQ/viewform

Thanks for reviewing and addressing this issue using the early preview tool! FYI - @remisharrock, @EllaHa.

[remisharrock]

Dear @marcotuts thanks for going through this bug that has a big impact on our 7 MOOCs. It look like we still have the same bug and the issue is not resolved. I don't understand what you mean by "I'm seing the experience load in the new location" ? I still see the scrollbar issue in hundreds of units we have in our course, for example here https://learning.edx.org/course/course-v1:Dartmouth_IMTx+DART.IMT.C.01+1T2020/block-v1:Dartmouth_IMTx+DART.IMT.C.01+1T2020+type@sequential+block@a649e9b9b93646a78db13fc5007952ec/block-v1:Dartmouth_IMTx+DART.IMT.C.01+1T2020+type@vertical+block@e8387802e1c44727a92a2267c6e9f26e or here https://learning.edx.org/course/course-v1:Dartmouth_IMTx+DART.IMT.C.02+1T2020/block-v1:Dartmouth_IMTx+DART.IMT.C.02+1T2020+type@sequential+block@7f90c0855f624fbfa70cedcdc1ba212e/block-v1:Dartmouth_IMTx+DART.IMT.C.02+1T2020+type@vertical+block@d2b11ca71f55477aa1dc0e2707e5f94d etc... Thanks again for your help I hope we find a solution that fixes hundreds of places with he same issue. It looks like the issue is because you changed the page by adding a global iframe, in the new experience, which by the way makes the interface even heavier on resources. Because of that, whenever we use height: 100vh; our iframe gets the height of your new global iframe, but then the global iframe resizes to fit our iframe, which makes an infinite loop. It means that we need to fix hundreds of iframe in all our courses and would like to find another solution with you. Your new iframe blocks us because it's not possible anymore to adjust the height of our content depending on the user's browser, as we don't have that information anymore from within that new global iframe in the new experience. Hope you will find a solution, let me know, My best,

[marcotuts]

I missed the follow up on this, I'm posting what I see for the linked examples. I see the scrollbar issue momentarily but then the block eems to load as expected -

We will ensure this course is disabled for now from the rollout, which is happening soon. Based on the screenshots above I'm not sure if there are any changes necessary, or perhaps maybe it only works for me in Chrome but the issue is browser specific? Can you let me know what browser you are seeing this issue on?

[remisharrock]

Dear @marcotuts thank you for letting us know! I just tried with these links (You screenshot appear to be the first one, correct ? ) https://learning.edx.org/course/course-v1:Dartmouth_IMTx+DART.IMT.C.01+1T2020/block-v1:Dartmouth_IMTx+DART.IMT.C.01+1T2020+type@sequential+block@a649e9b9b93646a78db13fc5007952ec/block-v1:Dartmouth_IMTx+DART.IMT.C.01+1T2020+type@vertical+block@e8387802e1c44727a92a2267c6e9f26e or here https://learning.edx.org/course/course-v1:Dartmouth_IMTx+DART.IMT.C.02+1T2020/block-v1:Dartmouth_IMTx+DART.IMT.C.02+1T2020+type@sequential+block@7f90c0855f624fbfa70cedcdc1ba212e/block-v1:Dartmouth_IMTx+DART.IMT.C.02+1T2020+type@vertical+block@d2b11ca71f55477aa1dc0e2707e5f94d

and I have the problem with:

edge 83.0.478.64 on windows 10 latest version (20.04) chrome 84.0.4147.89 on windows 10 latest version (20.04) firefox 78.0.2 on windows 10 latest version (20.04) firefox 78.0.2 on Linux Ubuntu 19.10

What was your browser and OS ?

Thanks again for your help

[marcotuts]

@remisharrock -

Yes my previous screenshot was from the first url.

I am not able to reproduce the issue using chrome 84.0.4147.89 on Mac OS. I will record what I see to be clear and link that below. I also tested these specific Edge and Firefox builds and saw the same behavior as in Chrome.

https://nimbusweb.me/s/share/4460106/25m9is5cif4kt0vmcoxp

My recommendation is to update the height from 100vh to use a specific pixel count. In testing I wasn't able to make this element taller than 646px. This would make then the loading screen more obvious to learners as the interactive element is loaded. Today with vh the loader keeps being pushed down until the element loads and then renders as expected at the top.

[marcotuts]

@EllaHa - Making sure you have seen this. For unrelated reasons we have delayed our rollout of the new experience but plan to enable this soon. Let me know what the team thinks about the proposed html solution here to speed up loading of the block and keep the loading progress bar in a learner's view while codecast loads.

[EllaHa]

Hi @marcotuts thanks for following up. We are on the process to change all the iframes. Do you have a sense of when the new experience will be released? thanks much for your help.

[remisharrock]

Hi @marcotuts while trying to fix this issue with the new experience we encountered a new issue: here is a comparison of the old experience and the new experience for this unit "Course Unit 4.1: Memory and pointers Defining and dereferencing pointers Dereference a pointer" at this place in the course: https://courses.edx.org/courses/course-v1:Dartmouth_IMTx+DART.IMT.C.04+1T2020/courseware/27b25e631c254ed09e1f67d84f02a01c/d26e90ec3b1f4663aa44006d6b1546fa/3?activate_block_id=block-v1%3ADartmouth_IMTx%2BDART.IMT.C.04%2B1T2020%2Btype%40vertical%2Bblock%40b1ef6a3e283f4243be2bf2dbd357b8ab

OLD EXPERIENCE IS OK

NEW EXPERIENCE IS NOT OK: missing title of unit in the menu (minor bug) and new vertical scrollbar hiding some buttons (major bug)

Tried with Edge Firefox and Chrome latest version on Windows 10 latest version (sept. 2020 )

[remisharrock]

Another problem I have @marcotuts is that I cannot use https://preview.edx.org/.. to preview the new experience , only the current experience ; so how can I make tests using preview server for the new experience ?

[remisharrock]

I found a solution here but it needs confirmation from edx, especially regarding the width="105%" for the iframe, is it OK to do that (no conflict with the new experience) because 100% does NOT WORK ?

<center><iframe title="a Codecast is displayed here" src="https://codecast.france-ioi.org/v6/player?stepperControls=_undo,_redo,_expr,_out,_over&amp;base=https%3A%2F%2Ffioi-recordings.s3.amazonaws.com%2Fdartmouth%2F1519141173714" marginwidth="0" scrolling="yes" allowfullscreen="true" style="background: #FFFFFF; padding-center: 10px; height: 1100px;" frameborder="0" width="105%"></iframe></center>
<p>If you can't see this <g class="gr_ gr_3 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="3" data-gr-id="3">Codecast</g>, <a href="https://codecast.france-ioi.org/v6/player?stepperControls=_undo,_redo,_expr,_out,_over&amp;base=https%3A%2F%2Ffioi-recordings.s3.amazonaws.com%2Fdartmouth%2F1519141173714" target="_blank">please click here</a>.</p>