Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: avoid onresize height loop

Browse Source 
We set a global `min-height: 100%` for the body element (a common strategy to
allow for background images to fill the viewport), but this is undesirable for
iframes where the `window.onresize` is used to programmatically adjust the
iframe height.  Because `onresize` will fire when the body adjusts itself as
per its `min-height: 100%`, in certain situations this will lead to an infinite
resizing loop.  This is notably visible when:

* Rendering the video block when using Firefox: this causes the iframe
  size to jiggle indefinitely.
* Rendering the HTML block when there are empty block elements (such as
  `<p></p>`) that have a vertical margin set (which happens to be the
  default to HTML blocks): this will cause the iframe to increase in
  height infinitely.

By adding an inline `min-height: auto` on the wrapping body element,
this overrides the Studio-served CSS, and thus fixes the problem.
This commit is contained in:
Adolfo R. Brandes
2021-09-29 10:58:50 -03:00
committed by Adolfo R. Brandes
parent e5a9ddcd87
commit 086e26ea69
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cms/templates/content_libraries/xblock_iframe.html
View File

@@ -125,7 +125,10 @@
<!-- fragment head -->
{{ fragment.head_html | safe }}
</head>
<body>
<!-- The default stylesheet will set the body min-height to 100% (a common strategy to allow for background
images to fill the viewport), but this has the undesireable side-effect of causing an infinite loop via the onResize
event listeners below, in certain situations. Resetting it to the default "auto" skirts the problem.-->
<body style="min-height: auto">
<!-- fragment body -->
{{ fragment.body_html | safe }}
<!-- fragment foot -->