Text and header image jump down the page whilst transitioning?

mpsenguin · November 2015

I'm using twine 1.4.2 in its original form, and can't figure out how to stop this from happening. Whilst test playing, the page gets temporarily longer and the image and text "jump" down every time I move to a new passage. It's playable but is spoiling the quality somewhat. Any ideas as to how to fix this? (Or is this a problem that is just because I'm test playing and will go away once I publish?)

greyelf · November 2015

It sounds like it may be a page re-sizing issue.

How wide is the image and how wide is your screen/web-browser window?

Did you add any custom CSS to your story?

Are you willing to supply a copy of your story TWS file for debugging purposes?

mpsenguin · November 2015

Thank you for the response- yes, it seems the page is re-sizing itself each time. I am using a custom CSS:

.passage .header {
background-image: [img[gulf]];
}
#sidebar {
display:none;
}
body {
margin: 0;
padding: 0;
height:100%;
}
#passages {
margin:0;
padding: 0;
height:100%;
}
#passages * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.passage {
position:relative;
width: 60%;
font-size:2em;
font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
margin: 2em auto 0 auto;
}
.passage .header {
width:100%;
height:480px;
min-height: 480px;
border: #fff double 0.5em;
border-radius: 1em;
margin: 0 auto 1.5em auto;
padding: 0;
background-position: center;
background-repeat: no-repeat;
}
.passage .content {
top: 500px;
width:100%;
border: #fff double 0.5em;
border-radius: 1em;
padding: 1em;
}
a.internalLink, a.externalLink {
border-bottom: solid #fff 1px;
color:#eee;
font-weight:normal;
}
a.internalLink:hover, a.externalLink:hover {
text-decoration:none;
border-bottom: none;
color:#000;
background-color:#fff;
font-weight:normal;
padding-left: 0;
}
a.internalLink:active, a.externalLink:active {
border-bottom: 0;
}
@media screen and (max-width: 960px) {
.passage {
font-size: 1.5em;
width: 75%;
}
}
@media screen and (max-width: 640px) {
.passage {
font-size: 1.25em;
width: 95%;
}
}
#passages { border-left: 0px; padding-left: 0; }

The images are 774 x 480 pixels, and I'm using IE/ Firefox in full screen.

mpsenguin · November 2015

Here's the tws file:

greyelf · November 2015

greyelf wrote:

...how wide is your screen/web-browser window?

mpsenguin wrote: »

... in full screen.

Which resolution you are running your screen in?
eg. how wide is your screen

greyelf · November 2015

The re-positioning is caused by the position:relative; attribute within your .passage selector, as far as I can see it serves no purpose and can be removed.

At first glance it seems that only difference between gulf and gulf2 is the background image, if this is true and the general layout of the rest of the page is to be the same for all pages of the story then I suggest moving the CSS that is common into another stylesheet passage. This new stylesheet passage (titled Layout maybe) would be the default layout of the story and you would only need to have the .passage .header selector in gulf and gulf2.

Something like the following three stylesheet passages:

1. Layout

#sidebar {
  display:none;
}
body {
  margin: 0;
  padding: 0;
  height:100%;
}
#passages {
  margin:0;
  padding: 0;
  height:100%;
}
#passages * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.passage {
  width: 60%;
  font-size:2em;
  font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
  margin: 2em auto 0 auto;
}
.passage .header {
  width:100%;
  height:480px;
  min-height: 480px;
  border: #fff double 0.5em;
  border-radius: 1em;
  margin: 0 auto 1.5em auto;
  padding: 0;
  background-position: center;
  background-repeat: no-repeat;
}
.passage .content {
  top: 500px;
  width:100%;
  border: #fff double 0.5em;
  border-radius: 1em;
  padding: 1em;
}
a.internalLink, a.externalLink {
  border-bottom: solid #fff 1px;
  color:#eee;
  font-weight:normal;
}
a.internalLink:hover, a.externalLink:hover {
  text-decoration:none;
  border-bottom: none;
  color:#000;
  background-color:#fff;
  font-weight:normal;
  padding-left: 0;
}
a.internalLink:active, a.externalLink:active {
  border-bottom: 0;
}
@media screen and (max-width: 960px) {
  .passage {
    font-size: 1.5em;
  width: 75%;
  }
}
@media screen and (max-width: 640px) {
  .passage {
    font-size: 1.25em;
  width: 95%;
  }
}
#passages { border-left: 0px; padding-left: 0; }

2. The gulf tagged passage, re-titled to something like Gulf Lights On

.passage .header {
  background-image: [img[gulf]];
}

3. The gulf2 tagged passage, re-titled to something like Gulf Lights Off

.passage .header {
  background-image: [img[gulf2]];
}

mpsenguin · November 2015

Thank you very much! That fixed it- I tried to change the "relative" part earlier but didn't think to remove it completely.

Howdy, Stranger!

Categories

Text and header image jump down the page whilst transitioning?

Comments