Header background loading slower than the main passage

Question

So I have a small problem probably caused by my inability to fully understand how CSS works in Harlowe.

 

Now I have divided the scree in three pieces: the sidebar to the left, the main passage in the centre right and a smaller sub-passage under it. The idea is to use this sub passage to display descriptions, thoughts and lore that would interrupt the flow of the story. This sub passage is tagged header so that it is loaded every time.

 

I was trying to build a small test to see if everything works and when I added some random background colors I noticed there was a good second of difference between the moment the main passage and the sub passage load their backgrounds (here: http://imgur.com/tAH0RYd is just started. Here: http://imgur.com/jSPiB19 is one second after). 

Any idea why?

Here's the CSS I am using. I'm sorry if it's not really good coding, but it's the first time I do something more complicated than changing text color.

tw-story{
	width: 100%;
  	height: 100%;
  	margin: 0;
}

tw-passage{
  	position: absolute;
  	margin: 0;
	width: 80%;
  	height: 75%;
  	top: 0;
  	right: 0;
  	border-style: hidden;
  	padding-top: 3em;
    padding-right: 3em;
 	padding-left: 3em;
  	padding-bottom: 3em;
	overflow: auto;
  	text-align: left;
  	font-size: 90%;
    background-image: linear-gradient(to top,  CornflowerBlue, MediumPurple);
}

tw-passage tw-include[title="infoBar"] {
	width: 80%;
  	height: 25%;
	position: fixed;
  	bottom: 0;
  	right: 0;
	left: 20%;
    padding-right: 3em;
 	padding-left: 3em;
  	padding-bottom: 3em;
  	border-style: hidden;
	overflow: auto;
  	text-align: left;
    font-size: 70%;
    background-image: linear-gradient(to bottom,  CornflowerBlue, MediumPurple);
}

tw-sidebar{
 	width: 20%;
  	height: 100%;
	position: fixed;
  	top: 0;
	left: 0;
  	padding-top: 3em;
    padding-right: 3em;
 	padding-left: 1em;
  	padding-bottom: 3em;
  	border-style: hidden;
  	border-right-style: solid;
	overflow: auto
  	text-align: left;
    font-size: 110%;
    background-image: linear-gradient(to left,  CadetBlue , DodgerBlue );
}

 

Answer 1

I don't have enough CSS experience  to answer your question but I am wondering why you're using a header tagged passage to show a footer instead of a footer tagged passage,

I also noticed that you're not overwriting the default padding of the tw-story element not it's default display value of flex, you are also missing semi-colon on the overflow property of your tw-sidebar element.

I am assuming that you're aware that both tw-sidebar and tw-include are child elements of the tw-passage element, and as such they will both be destroyed and recreated when tw-passage is during passage traversal.

Comments

Oh on header/footer there isn't really any difference, since I state a new fixed position for it. It needs a header tag just because I need it to render regardless of the main passage.

 

On the syntax mistakes you're definetly right, I will work on it more for when I start using this. For now it's more of a proof of concept than anything.

 

And yes I am aware of that fact. I don't really understand the problem, because if it was for the fact that they need to be redrawn every time with the main passage the sidebar would be delayed as well, but it is only the sub passage that is affected.

---

As I understand it Harlowe's process of attaching the generated HTML elements to the existing page consists of two main parts:

1. Wrap them in a tw-transition-container element and then attach that bundle to the page, using a related CSS selector to animate their appearance.
eg. [data-t8n^=dissolve].transition-in

2. Remove the tw-transition-container element from the structure afterwards.

I played around with your CSS and if I removed the position: fixed; related properties from your header based selector then it would fade in at the same rate as the Passage content, otherwise the header has the delayed fade in start.

How to remove the delay from the header's render is beyond my skill. Although I did try a number of different header related CSS selectors to see if I could disable the fade-in totally so that it would appear in the same way as the tw-sidebar element does, but I could not get that to work.

P.S. The reason I previously mentioned the destruction of the tw-sidebar element is that some people have used Javascript during startup to add content to that element only to be surprised when they learn they need to keep re-adding that content for every passage traversal. 

---

Ok I played around a bit and it appears there is indeed an extra animation attached to header tags. I tried editing the transition animation and it solves the issue.

tw-story, [data-t8n^=dissolve].transition-in {
	-webkit-animation:appear 200ms;
	animation:appear 200ms
}

tw-passage tw-include[title="infoBar"], [data-t8n^=dissolve].transition-in {
	-webkit-animation:appear 0ms;
	animation:appear 0ms
    /*This is for deactivating the extra fade in*/
}

[data-t8n^=dissolve].transition-out{
	-webkit-animation:appear 200ms reverse;
	animation:appear 200ms reverse
}

 

The only problem now is that it seems this disengaged the fade in animation of the text that it normally has. Now it just renders immediately together with the background. It's not really a big issue, I just need a way to add a transition to the text only (which I'assuming is doable).

 

Anyway, thanks for the help. Really appreaciate it!

---

Try wrapping the content of your header in an element (span or div) and animating that instead, it 'should' work although I didn't test it.