I have added some divs inside my passages to arrange text in a more dynamic way. I’m finding that when a passage loads, it initially does not load certain CSS formatting (eg. line height of the text in the div). After a few seconds, it catches up and formats the content correctly. This happens even if I put the styling directly into the passage itself, at the start of the div, as well as or instead of the style sheet).
Any idea why this is happening? I have meddled with the Harlowe transitions to have a longer fade in, but I don’t see why that should affect it.
Sorry about this thread. I honestly don’t know what to post about anymore because I keep coming up with fixes that create other problems. Can anyone help me with why my links now have rounded black borders appearing around them when I click on them?
I have tried adding border: 0 to .enchantment-mouseout:hover, .enchantment-mouseout, tw-debugger button, tw-notifier, tw-link, tw-link:hover, .enchantment-link, .enchantment-link:hover, tw-link:active and.enchantment-link:active, but it won’t get rid of it.
The “visual effect” associated with Harlowe’s Passage Transition process ignores block based HTML elements (like <div>), which is why you are seeing the two stage visualisation/styling of the current Passage’s content. Changing the display CSS property of the block based elements you are using to being inline-block instead (and adding a 100% width) may fix your issue.
eg. by adding CSS like the following to your project’s Story Stylesheet area.