Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Two issues with Combined Macro Set

edited December 2013 in Help! with 1.x
I'm presuming people are using L's Combined <<Replace>> Macro Set (I downloaded it from http://www.glorioustrainwrecks.com/node/5462) as it provides some awesome functionality. I'm having two problems with it though.

Firstly, there's an accompanying bit of CSS code which (I think) makes the text fades and stuff work (that's about as technical as I get). Annoyingly it doesn't always seem to work. Specifically I'm trying to use the <<timedcontinue>> function, and the text randomly fades in or just appears, creating a frustrating juddering and messing up the timing of the delays. I've attached an example game to show the problem. If it happens to display the first time, as it did on my friends laptop, click the link a few times to retry and the problem will rear its head.

Secondly, I thought it might be Firefox causing the problem, so I tried IE8 (the latest version for XP), where the macro doesn't work at all! I've attached the warning message and webpage output after continuing as .jpegs. Sorry about the quality, the forum seems to allow a 192kb upload limit.

Any ideas as to what's going on? Thanks for reading.

Edit - I noticed a little bug report twitter thing on the page I got the macro from, but I am not cool enough to tweet. Sorry, L!

Comments

  • Its using Chrome functionality. You can take it out completely like this if you want. But testing it in Chrome, which is was coded for, it works perfectly fine.
    .revision-span:not(.revision-span-out) {
    transition: 1s; -webkit-transition: 1s;
    Webkit is for Chrome IIRC. Its not going to work right on Firefox which uses -moz functions. And it certainly won't work on IE. If you want to add in equivalent code for IE Im sure its easy enough to find. It's just the way the transition was coded.
  • I see, thanks. Good to know its not a bug! The CSS does look pretty simple, but still way outside my (lack of) coding ability. I'll post a question on a coding forum, or if anyone here fancies a go at making it cross-browser that'd be great.
  • Hope double posting is OK. Someone at Stackoverflow helped me out with the following replacement CSS code:
    .revision-span-in {
    opacity: 0;
    }
    .revision-span:not(.revision-span-out) {
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    }
    .revision-span-out {
    position:absolute;
    opacity: 0;
    }
    Unfortunately, it doesn't make any difference! Could there be something I've done wrong, or a problem in the macro itself?

    EDIT: Here's a link to the forum post where I asked for help. It's way over my head! http://stackoverflow.com/questions/20792957/making-simple-css-cross-platform
  • That looks right. So the problem is either with the macro (I know L put a ton of work into that macro and I wouldn't want to be the one to pick the code apart) or some contradiction in the engine header you're using. I'm assuming it's Sugarcane judging from your example. The only other thing you could do is advise your users your game runs best on Chrome. That's assuming you have no coding knowledge. Sorry I couldn't help more than this, I haven't tested it but try replacing the mozilla code with:
    -moz-transition: -moz-transform 1s ease-in-out;
    Best of luck.
  • Here's some things that I want to say:

    * The "-moz" prefix for CSS transitions has been gone from Firefox since version 16. Stop using it. (Furthermore, the "-ms" prefix never even existed.)

    * While Twine by itself supports IE 8 (for most of its functionality), my custom macros do not.

    * I've investigated the problem, and since the performance of the fade-in seems to vary even by individual runs of the same HTML code, I can only conclude that Firefox just has a buggy implementation of CSS transitions. So, it's out of my hands.
  • [quote]* The "-moz" prefix for CSS transitions has been gone from Firefox since version 16. Stop using it.

    Good to know. Nice of you to stop by. Too bad about Firefox though.
  • I use the <<insert>> macro a lot, but I'm not having any issues in the latest versions of IE, FF, or Chrome.

    The one thing I'd like to know how to do is change the grayed-out text to another color (#00FF00).
  • Thanks, all. And guess what? Problem fixed in Firefox! For realsies!!

    After some head scratching at stack overflow (code forum) I posted an example twine output web page. A guy took a look and said:

    [quote]Extra bit (after seeing added dropbox link)

    Considering the dropbox link, what I think is causing it is this: Firefox is still animating the first element when the second shows up, so it doesn't restart the animation.

    This could explain why it happens randomly: it only happens when Firefox has a few milliseconds of lag, and firefox continues playing the animation for the second item from the starting point of the second animation. This is likely caused by the fact that your items are nested, so the animation of the first row would be inherited by the animation of the second row, and so forth.

    Since your animation length is 0.5 seconds exactly, and the interval between showing elements is also 0.5 seconds exactly, if there is the slightest bit of lag this cause these problems. I suggest putting a tiny extra space between showing each element (perhaps 10 or 50ms or so), or changing the items from a nested method to a sibling method. So, instead of this:

    <div class="body content">
      <span class="first">500ms
        <span class="second">500ms
          <span class="third">500ms
            <span class="fourth">500ms</span>
          </span>
        </span>
      </span>
    </div>

    Use this:

    <div class="body content">
      <span class="first">500ms</span>
      <span class="second">500ms</span>
      <span class="third">500ms</span>
      <span class="fourth">500ms</span>
    </div>

    So, instead of appending the spans to the current span, append it to the parent element .body.content. I would give you a demo, but your script looks really quite complicated (probably because it's generated by something), so you'll have to try doing that yourself. You could also try putting a tiny bit of extra space between each item's animation starts and see if that fixes it.

    I stared at this blankly for a few minutes, and then said, "Uhh... so it needs an extra delay in Firefox??" And lo and behold, it did! All I've done is added a 10ms delay after each intended delay and it works perfectly every time. So L was absolutely correct (not that I ever doubted you!)

    So, (and I'll shut up about it after this because it's an awesome extension and I have no right to be whining) is there any way I can modify the macro to automatically insert a separate extra 10ms gap after each specified time delay?
Sign In or Register to comment.