Screen "jump" issue with Storyline 3, HTML 5, IE 11 on multiple-choice questions

Has anyone else experienced this problem? In IE 11, on most if not all multiple choice question screens, there's a 1-pixel "jump" when you select an answer option and then select a different one. The strangest thing is that it doesn't happen all the time, i.e., if you have four answer options and you go up and down the list of options a few time, selecting each option, sometimes you will see the jump and sometimes you won't. This is only happening in IE, not Chrome or Firefox. I've checked all states for each answer option to make sure they're all the same size.

20 Replies
Katie Riggio

Hi there, Mary Ann! Thanks for reaching out here, and really sorry you're running into the shaking radio button behavior in the HTML5 output in IE 11.

We have this issue documented for Storyline 3, and are currently investigating why this is happening. I'm going to include your thread in our report, so we can notify you with any updates right here!

aurore austruy

Hi ! We have the same issues here, in IE11.

It happens too, when you have a "text entry field" on the screen, and also when you clik on a deactivated (state) object.

For example: a "validate" button who is deactivated at the start, and becomes "normal" when a viariable changes for example.

For us, the entire screen jumps. So, we can see objects who are not in the screen. Like when you put an object on the side of the slide in case if you want to use it later.

Thanks!

aurore austruy

After few more tests, we can see that it is the objects on the "base layer" who jumps, and all the objects come back to their place when the user moves his mouse.

I will try to put every objetcs who are in the base layer, in a layer who shows when timeline starts.

EDIT: Because of to many objects who are in layers who acts on the states of my objetcs on my "base layer", i can't do it...

Maybe we should make this test on a lighter slide. But I can't do this now.

Ashley Terwilliger-Pollard

Hi Aurore, 

Jumping objects doesn't sound like a lot of fun, so let's figure out what's causing it. It looks like Mary Ann originally saw it while viewing the published output - are you seeing this while editing/previewing or in your published output too? 

How many layers do you have on each slide? How many duplicate objects (appearing on base layer and slide layers)? Could you share a copy of your .story file here with us so that we can take a look? You can upload it by visiting this page and clicking Add Attachment below the reply. 

aurore austruy

Hi everyone !

Thank you for your answers. I am french so, sorry for my english, i will try to be clearer next time.

I've made a screen casting of the problem of "jumping objects". I did it with storyline, directly in the .story flie, that I've attached in this post.

The content is confidentially, so thanks to not reuse it.

In the principle, the game is a crossword. When you click on a word in a grid, you go to the slide in the story file.

The user has to type a word in the text entry field, and click on validate.

For information, the objects who moves are only the objects on the "base layer", and it happens only on the HTML5 export, in IE11.

Thanks in advance for your help.

Alyssa Gomez

Hi Aurore!

I did some digging into your file, and I found that the jumping or blinking behavior was caused by the buttons that were partially off of the slide stage. 

Once I moved those buttons fully onto the slide stage, the jumping disappeared and the slide worked normally. 

I'd like to share this with my team so we can begin investigating the problem and looking into a fix. I really appreciate you bringing this up to us, and I'm sorry if it's slowing you down!

aurore austruy

Hi!

Sorry for the late answer.

I'm so glad that you found a solution to my problem.

In first time, i thought that i'll have to move all the objects who were partially off of the slide stage, because, all my images at the left, are also off of the slide stage!!

So, the problem seems to appears only with the images, who are partially off of the slide stage on, the right side.

I did the correction on my file, and everything works fine now.

Thanks again for your help!

Mark B.

I'm experiencing the same issue as Aurore, where anything off the stage on the right-side (and bottom on some slides) shifts when a button is clicked to jump to the next slide...it seems to shift enough to display any of the content that was off screen. I have a circular Next/Prev button that I used throughout my course and I have it so that only half of the circle is onscreen and the other half is off the stage. Clicking the previous button (left side of the screen) doesn't shift anything, but clicking the Next button (right-side) shifts all content to the left so that the entire Next circular button is displayed.  The weird thing is that this only happens on some slides -- seems that when that same Next button is on any type of quiz question slide it doesn't do the shift and works properly. 

The shift is happening when previewing, and when viewing the HTML5 version in both IE11 and Chrome. The Flash version seems to be fine.

Ashley Terwilliger-Pollard

Hi Mark,

Sorry, you've run into this issue as well. Our team has only run into using IE11, so I'd like to know what version of Chrome you're using? I believe the latest version is 67, so you'd want to check that you're using that. 

If you're seeing it there too - do you have a copy of your course that you can share with us? The .story file and a link to where you're hosting it would be helpful! 

Crystal Horn

Hi there, Laurel.  Thanks for including your file.  I saw a little shift upward after clicking the continue button on your feedback layers to move to the next slide.  I did some troubleshooting, and I couldn't figure out what was causing it.  I know that's frustrating.

I'm going to hand your file to our support team to see if we have a known issue that your setup matches.  You'll get an email confirming that they've got it, and I'll follow along as well!

Noel Sapp

Any context on those steps for the rest of us?

I've fixed some slides that had like 1 pixel overhang past the slide's edge. Bringing those well within the slide fixed that. Another issue is though some some elements appear to be inside the slide frame, their grouped bounding box overlap the slide edge. That also seems to cause the same problem. So just FYI to other users, if the object is inside the stage then check to see if your grouped bounding box goes beyond the stage.

Right now though, I have several quiz question slide answers jumping around and nothing appears to hang over the slide edge.

Andrew Baloga

This may not help in every case, but I have experienced an annoying upward shift on several custom activities I created in which I the seekbar was hidden on select slide layers, and displayed on others. To eliminate this, I forced the player controls area to 30 pixels in height — the default is a minimum of 28 px and a maximum of 30 px.

⭐Create a trigger to execute JavaScript when the timeline starts, and paste this single line into the JavaScript window:

$('div.controls').height(30);

This may solve someone's issues...or maybe not, but at least it is quick to test.

(˵ ͡° ͜ʖ ͡°˵)
вєωαяє, ι αм ƒαη¢у!

Lauren Connelly

Hi Noel!

We've found this is an issue in Internet Explorer 11 where the base layer shakes or moves. It is a bug that our team has been looking into for quite some time and feels the fix could negatively impact other parts of the software. If our team decides to reroute, we'll let you know in this discussion.

In the meantime, thank you Andrew for sharing your workaround! This community always brings bright ideas to areas like this!