Incorrect z-index of animating objects in Chrome and Safari.

We're experiencing an issue with animating objects displaying at the wrong z-index on animate (animating objects appearing above other objects despite their stacking order in the timeline). We've only noticed this issue after recent updates to desktop versions of Chrome and Safari.

Here's a quick rundown of the versions tested and course settings:

  • Storyline 360: v3.24.17733.0
  • Storyline 3: Update 5: 3.5.16548.0
  • Chrome: Version 72.0.3626.109 (Official Build) (64-bit)
  • Safari: Version 12.0.3 (14606.4.5)
  • Displaying correctly in IE11, Edge, Firefox Quantum 65.0.1 (64-bit), Mobile Chrome (Version 72.0.3626.101), Mobile Safari (iOS 12.1.4)
  • HTML5 only output with Modern player
  • Issue consistent amongst all entrance animation types

I've attached an example .story file that is exhibiting the issue. In this example, the background image fades in above the custom menu in the lower right corner. Based on the stacking order in the timeline, the image should enter behind the menu.

In our testing, we've also noticed that even though the buttons are being covered by the image, the buttons are still active and you can "click through" the image. When removing the entrance animation from the image, the image displays correctly behind the menu. 

There have been some similar but different discussions recently in the forum, so I just wanted to check in on if this is a known issue. Any help or information is greatly appreciated. Also, if you have any questions, just let me know.

Thanks!

18 Replies
Matt Leo

Pete, thank you for reporting this!

I've been seeing this same issue on my clients' courses. It's a serious issue on certain courses because navigation buttons and other critical UI elements are getting hidden behind animated assets.

Crystal, do you have a timeline for the fix? This bug is holding up some of our deliverables that we need to send out asap. Without a prompt fix, our only option is to remove all animations from our courses.

Ashley Terwilliger

Hi Matt,

Our team is doing some final testing on the fix for the issue where an image with animation on top of another image with an animation won't display or changes layer order on Chrome 72 and Safari in the HTML5 output. This should be available in the next update later this month. We'll let you know here as soon as that's official and the update is available. 

Matt Leo

Hi Ashley,

Thank you for the update. We're starting to see this issue come up in even more courses now, so it is a critical bug for us. I appreciate you giving us an approximate timeline for this fix!

Am I right in assuming this bug was caused by the latest version of Chrome and Safari, and not Storyline itself? We're just starting to see the bug for the first time, and it appears even in courses that were published in older versions of SL360.

Ashley Terwilliger

Hi Matt,

Yes, it only popped up in the latest update of Chrome, so it was a change there. If folks don't update to that version and stay on Chrome 71, they shouldn't run into it until the fix is out.

Once that fix is available, you'll need to republish courses using the update of Storyline 360 to take advantage of the fix. 

Ashley Terwilliger

Hi Pete and Matt,

Happy Tuesday - Storyline 360, build 3.25.18009.0 is available today, and it fixes the issue you'd run into where some objects disappeared when viewing courses in Google Chrome 72.

You will need to download and install the latest updates to republish your project and take advantage of the fix. 

Alyssa Gomez

Hi everyone,

I really appreciate you letting us know how this issue is affecting your projects. Our team is working hard to to add support for these Chrome and Safari browser changes in Storyline 3. You can read more about what we're doing to help with missing images and slide objects in this post we recently shared with the community. 

Leslie McKerchie

Hi again everyone,

I'm happy to share that an update to Storyline 3 is available today.

Enhanced: We added support for Google Chrome 72 and Safari 12.0.3. If objects disappear when viewing a course in these browsers, install the latest Storyline 3 update and republish your course.

Check out all the details on the latest release here.

Please let us know if you run into any issue after updating and republishing.