Clicking on a small album artwork image in a tiddler in my tiddlywiki music player displays a larger version of the artwork in a popup the size of the tiddler, which I implemented with CSS (not sure if this can be implemented with the ActionPopupWidget, as I don’t fully understand the documentation). This works well. What I am seeing though is that whenever the tiddler’s height is larger than the height of the browser window or is followed by other tiddlers such that the total height exceeds the height of the browser window, it is scrolled by its top margin, I presume by tiddlywiki’s scroll mechanism, such that its top aligns with the top of the browser. On hiding it jumps back to its original position. When the tiddler (or the total height of the tiddlers) is smaller than the height of the browser window this does not happen, as desired.
In Quine on iPad this scrolling somewhat annoyingly interferes with selection in the sidebar, which, as a good law-abiding citizen, does not move: the tiddler selected in the sidebar is the one two tiddlers below the tiddler touched (in my setup). If no scrolling occurs, selection in the sidebar is unproblematic.
Is there a way to prevent this scrolling from happening, i.e. to not scroll at all when the larger image is popped up, also not when the tiddler is not the top one in the story river? That would be wonderful.
Included is test code with which the behavior can be reproduced.
the “testPopup” tiddler
<a href="##testPopup"><img width="128" src="a local album cover image.jpg"/></a>
<div id="#testPopup">
<a href="#" class="testPopup"><img width=600 src="the same local album cover image.jpg"/></a>
</div>
content to make it larger (or smaller)...
the CSS tiddler, testPopup.css
[id="#testPopup"] {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: none;
background: rgba(240, 240, 240, 0.4);
}
[id="#testPopup"]:target {
display: block;
}
.testPopup {
width: 602px;
height: 602px;
position: absolute;
left: 0;
right: 0;
margin: 64px auto;
border: 1px solid #CCC;
cursor: default;
}