The issue is caused by how the “dissolved” effect is implemented, specifically the CSS being used.
If you temporary alter the delay of (t8n-time:)
macro associated with the 1st link from 1s to 10s (or more) then you can use your web-browser’s Web Developer Tools to inspect the HTML elements being used to achieve the “dissolved” effect.
1: The elements before the 1st link is selected…
This is the first
<tw-expression type="macro" name="t8n" return="changer"></tw-expression>
<tw-expression type="macro" name="t8n-time"></tw-expression>
<tw-expression type="macro" name="link-reveal"></tw-expression>
<tw-hook>
<tw-link tabindex="0" data-raw="">phrase.</tw-link>
</tw-hook>
2: The above <tw-hook>
while the “dissolved” is in effect, after the 1st link has been selected.
<tw-hook>
phrase.
<tw-transition-container data-t8n="dissolve" class="transition-in" style="animation-duration: 20000ms; animation-delay: 0ms;display:block !important;width:100%">
<br>
And here is the
<tw-expression type="macro" name="t8n" return="changer"></tw-expression>
<tw-expression type="macro" name="t8n-time"></tw-expression>
<tw-expression type="macro" name="link-reveal"></tw-expression>
<tw-hook>
<tw-link tabindex="0" data-raw="">second.</tw-link>
</tw-hook>
</tw-transition-container>
</tw-hook>
3: The above <tw-hook>
after the “dissolved” effect has ended.
<tw-hook>
phrase.
<br>
And here is the
<tw-expression type="macro" name="t8n" return="changer"></tw-expression>
<tw-expression type="macro" name="t8n-time"></tw-expression>
<tw-expression type="macro" name="link-reveal"></tw-expression>
<tw-hook>
<tw-link tabindex="0" data-raw="">second.</tw-link>
</tw-hook>
</tw-hook>
As you can see Harlowe briefly wraps the content being revealed within a <tw-transition-container>
element, which has some inline CSS applied to it.
And if you use the CSS/Styles panel of your web-browser to individually disable each of the properties being applied to that element you will discover that the display:block !important
setting is causing the “gap”.
And the facts that it is being applied using in inline CSS, and that it’s using the !important keyword/rule, makes it particular difficult (if not impossible) to work around.
Short from implementing your own custom “dissolved” effect using CSS, I personally don’t know a way to fix the issue with the macro. Maybe someone with greater CSS knowledge will.