Help debugging innerwiki

Developers
#1

I have my own, heavily customized, instance of TW (which, unfortunately, I can’t share).

I tried to use innerwiki to help with widget development. I copied the example from TW widget tutorials — Step-by-step widget demonstrations

When I change hello.js (even by adding a space), the innerwiki is not rendered. I can see the iframe in the dom tree, and its size is computed correctly (so not zero size) but nothing shows.

I know this is a longshot, since I can’t share an example of this, but maybe someone has some pointers as to why the innerwiki might not render?

If I edit the tiddler that wraps the innerwiki and cancel, everything renders fine, until the next change in hello.js

#2

So, below is the html rendered by the inner wiki when nothing is shown and below that after I edit and cancel editing. Note in the hidden version the wrapper has a style of height 0 and the iframe has no scale

<div class=" tc-innerwiki-wrapper" style="overflow: hidden; position: relative; box-sizing: content-box; height: 0px;">
        <div style="position: relative; z-index: 2; transform-origin: 0px 0px; transform: scale(0);">
                <div style="position: absolute; display: none;"></div>
        </div>
        <svg viewBox="0 0 600 400" style="width: 100%; position: absolute; z-index: 1; pointer-events: none;"></svg>
        <iframe class="tc-innerwiki-iframe" width="600" height="400" style="position: absolute; max-width: none; border: none; transform-origin: 0px 0px; tran
sform: translate(0px, 0px);"></iframe>
</div>

<div class=" tc-innerwiki-wrapper" style="overflow: hidden; position: relative; box-sizing: content-box; height: 699.333px;">
	<div style="position: relative; z-index: 2; transform-origin: 0px 0px; transform: scale(1.74833);">
		<div style="position: absolute; display: none;"></div>
	</div>
	<svg viewBox="0 0 600 400" style="width: 100%; position: absolute; z-index: 1; pointer-events: none;"></svg>
	<iframe class="tc-innerwiki-iframe" width="600" height="400" style="position: absolute; max-width: none; border: none; transform-origin: 0px 0px; transform: translate(0px, 0px) scale(1.74833);"></iframe>
</div>
#3

So, further debugging, it seems this stems from using this.domWrapper.clientWidth when rendering the innerwiki to calculate the scale of the wrapper and iframe where it is 0. If I inspect this property in the dom tree (after rendering finished), it has non zero value.

#4

I think this is because I used a tabbed style story, so the tab with the iframe is not visible when the innerwiki js runs. Tabs are hidden with the $reveal widget, so seems like the innerwiki (or at least the scaling) needs to run after the reveal widget runs (setTimeout?), or, add the wrapper directly to the document just to get the width and then move to its real location.

#5

I think that’s a bug. I am very sure the tabbed usecase you describe here has never been tested that way. So if possible, you should create a very minimal testcase wiki at tiddlyhost or GitHub that lets us see the problem. Then you should create a GH issue with a link to that wiki.

#6

Done: [BUG] innerwiki scales contents to zero size · Issue #8378 · Jermolene/TiddlyWiki5 · GitHub
This will actually happen just the zoomin view