Why is my screen flashing when picking/choosing options in Twine? (Harlowe 3.2.3)

If you are requesting technical assistance with Twine, please specify:
Twine Version: version 2.3.16
Story Format: Harlowe 3.2.3

Hello! I am very very new to Twine and doing anything like this in general, so I need some help that I’m not finding anywhere. This is my very first game that I’m trying to get polished in the next day so any help would be seriously appreciated. I’m having this weird problem where when I play my game and select an option, sometimes the game will glitch and flash a little bit to the next passage. This is what is happening on my screen. (The first click is what I want but the next few have a flash of white and a glitch on the side that I don’t want there) I’m not sure what code to show here since all I’ve put on these passages is text color and background color (which there is probably an easier way to do but again I’m learning, haha), but I’ll put the ones that are in this video and having problems below so you can test it. I’m super new to this and even asking help online, so forgive me if I’m doing anything wrong here. Thank you for your help!

The fog had floated down from the sky to the ground, but thankfully for you, it wasn’t too thick. Another scan around revealed a few areas that stuck out to you. 

You had discovered the owner of the sound you had heard. Through a break between a cluster of trees, you could make out a (text-colour:(hsl:203,0.92,0.7549,0.75))[[rushing river]]. Water is life, as they say. Following it may lead to someone. 

You had also identified the trees’ leader. Through the vapor, you could spot a (text-colour:#a0522d)[[thick Sequoia trunk]] that commanded the space around it, trees nearby seemed to be in awe of its might. It was a big landmark. Maybe someone would see it too and come by. 

A split in another cluster of trees unveiled what seemed to be a (text-colour:(hsl:124,0.8324,0.649,0.75))[[bare field]], or at least as bare as you could make out in the haze. Moving to an open space could give you a better viewpoint, and you might find someone.

Where to first?
(enchant:?page,(bg:grey))
(enchant:?page,(text-colour:#3CB371)+(bg:(hsl:203,0.92,0.7549,0.75)))Entranced by the sound of water, you made your way through the trees towards the river. However, it’s song was not the soothing tones that you had imagined it to be. Instead, it raged, a vengeance carrying it downstream. While it wasn’t too wide, you feared crossing it for its depth was unclear and its force terrifying. Approaching it with caution, you became aware of another presence dashing along the water’s edge. A rabbit, its blue fur a misplaced color amongst the speckles of green and brown, paced nearby. It would stop occasionally, peering with desire at the adjacent water’s edge, before once again matching the energy of the river’s flow. Your [[reverie]] led you right into the rabbit’s path, and they ran into your leg with full force.

(set: $river to true)
(enchant:?page,(bg:(hsl:203,0.92,0.7549,0.75))+(text-color:#6382B9))[“Hey! Watch it!”] (text-colour:#3CB371)[said the rabbit, rubbing their cheek from the impact before looking up at the culprit. (text-color:#6382B9)[“It’s rude to interrupt someone who’s contemplating, dontcha know?”]

(text-color:#a478b8)[“Oh. I’m sorry,”] you replied. You kneeled down to meet the rabbit at their height.(text-color:#a478b8)[ “What are you contemplating about?”]

(text-color:#6382B9)[“What do you think? I’m trying to get across this river, //genius//,”] they sneered back, turning their attention to the other side of the river once more.(text-color:#6382B9)[“My family is over there, and I have to get across somehow. It’s got me in a real pickle.”] Resting a paw on their cheek, the rabbit’s face scrunched further, then they looked back up at you.] (text-color:#6382B9)[“Hey, why don’t you help me out?”]

(text-color:#a478b8)[“Me?”]

(text-color:#6382B9)[“Who else do you think I’m talking to, kid? Of course, you! What do you say? You gonna help me or not?”]

[[Help the rabbit cross to the other side]]
[[Leave the rabbit to figure it out on their own]]
(enchant:?page,(text-colour:#3CB371)+(bg:(hsl:203,0.92,0.7549,0.75)))[(text-color:#a478b8)[“Sure. I //am// a genius after all, you said it yourself,”] you responded with a smile.

The rabbit rolled their eyes, but the flick in their ears gave them away. (text-color:#6382B9)[“Well, //genius//, what’s the plan then?”]

(text-color:#a478b8)[“You don’t have one?”]

(text-color:#6382B9)[“Oh, I’ve had many, but most of them don’t have a high likelihood of success. And besides, even with your height, I don’t think you’re going to be able to reach me across that river.”] They were right. The distance was big enough for you to know that if you decided to toss them across, you would have to chuck the rabbit to make the gap. Walking through the river with them in your hands or in your hoodie pocket wasn’t going to work either. Even on closer inspection of the water, it was still unknown to you how deep it actually was. Instead, you decided to [[look around]] for anything that might aid you.]
(enchant:?page,(text-colour:#3CB371)+(bg:(hsl:203,0.92,0.7549,0.75)))[(text-color:#6382B9)[“Hey, you dead?”] the rabbit called up to you. You must have been in deep thought for a while.

(text-color:#a478b8)[“Oh, I was just thinking,”] you replied.

(text-color:#6382B9)[“And? What did you come up with?”]

(text-color:#a478b8)[“Well…”] You pointed toward a tree a bit aways. It was one that disappeared into the foggy clouds above and was fruitful with branches and leaves, but funnily enough, no fruit. (text-color:#a478b8)[“It looks like one of those branches might be loose. I could break one off and you could use it like a bridge. Or…”] You shift your finger to point down the river’s stream. (text-color:#a478b8)[“We could walk downstream a bit and see if we find some other way across.”] The rabbit nodded its head as they listened to your ideas, and a silence hung in the air for a moment. 

(text-color:#6382B9)[“So? Which one?”]

(text-color:#a478b8)[“Huh?”]

(text-color:#6382B9)[“C’mon kid, get with the program. Are we breaking a branch or walking along the water?”]

[[Breaking the branch]]
[[Walking the walk]]]

Just to be clear, you’re not doing anything wrong!

However the methods you’ve chosen to apply styling to the Passage content are affected by how those methods work, and how the Passage Transition process applies its “fade-in” effect.

Simply put, the “white flash” you are seeing is caused by the fact that the Passage content is being displayed (at least) twice, first without the “page level” styling, and then later with that styling applied.

A very simple but crude way to demonstrate what is happening is the following…

The contents of the Passage

(link: "Apply Styling")[
	(enchant: ?page, (text-colour: #3CB371) + (bg: (hsl: 203,0.92,0.7549,0.75)))
]

…to see exactly what is happening requires using something the Animation feature of your web-browser’s Web Developer Tools to single step through the multiple renderings of the “current” Passage’s content.

One possible technique you can use to “fix” the “white flash” issue to some extent is to apply your styling using actual CSS, instead of macros that generate it.

For example, if you assigned a fog Passage Tag to the first of your Passages, and a river tag to the 2nd Passage, then you could use CSS like the following within your project’s Story Stylesheet area.
note: Don’t forget to temporary remove the (enchant:?Page) macro calls in those two Passages when you test the result.

tw-story[tags~="fog"] {
	background-color: grey;
}
tw-story[tags~="river"] {
	background-color: hsl(203, 92%, 75.49%, 75%);
	color: #3CB371;
}

…now any Passage you assign one of those two tags too will have the same “page level” styling applied to it.

3 Likes

Well first off, hello Greyelf! I see your answers and replies everywhere so I am truly honored that you would help me with my question as well! Secondly, I think I understand. So, just to clarify, should take out the background color and overall text color of these passages and put them in the Story Stylesheet like you did above with tags? If that’s correct, I’ll give it a try and let you know how it goes! I’ve been trying to use tags and the Story Stylesheet before and have been facing difficulty with it. Thank you for your help!

1 Like

Well I just did what I asked for clarification on and it worked! Thank you so much Greyelf for your help here and all the other answers I have gotten from you from other posts!!

1 Like