Web object and SL-created shapes

Jan 28, 2021

Hello,

We encounter a problem that seems present in at least the last 2 SL360 updates :
some shapes created in SL and that are supposed to be IN FRONT of a web object disappear (i guess they're behind the WO) depending on the size of the browser window. I have attached 2 screenshots of the same slide. In my test, all 3 shapes (red, green and blue) are supposed to show in front of the web object. As you can see, the blue one stays, but the two others don't.
I have tried various shapes : some stay in front and some don't no matter where they're placed on the slide.

The problem is present in chrome (v88.0.1324.104), Edge too.
Firefox (v72.0.2) doesn't seem to show the problem.

Is it something the developpers already noticed ?

Thanks !

10 Replies
Walt Hamilton

I think there is at least a slight possibility that if the web object loads after the shapes appear, it may load on top of the slide. Does it happen if they appear after it loads? If that's the problem, and they have to be visible before it loads, you can probably bring them back to the top. Give them a motion path with zero length and not a relative start. Move them on that path after the object loads, and that should bring them back on top.

Adélaïde Bab

Hey Walt and Math !

Thanks for taking the time to answer.


So, i did multiple tests. If shapes have an entrance animation, they appear on top like they're supposed to and stay on top even when I resize my browser window. I can use this as a workaround.
But what's really strange to me is that a circle is always where I placed it no matter when it's loaded and without animation, but a square without animation will be visible as expected when viewed in a small window and disappear in full screen.

Math Notermans

Made a quick sample and indeed... it certainly is a bug. As the  Webobject has a z-index of 1 and all the shapes have higher z-indexes when published for Web in the Modern Player. You could force the z-index with javascript, but that should not be needed. Gonna dive somewhat deeper..
Ps. now loading a PDF in my WebObject, gonna make it smaller so the load is quicker..

Math Notermans

Well this at least solves it.
Setting the zIndex to a looooow value and all elements are on top as needed...

var webObj = document.querySelector("#slide-window > div > div > div > div > div.slide-layer.base-layer.shown > div.slide-object.slide-object-webobject.shown.cursor-hover > div")
gsap.set(webObj, {css:{zIndex:-50}});

You need a selector for your WebObject offcourse.

here is a sample... deactivate the JS trigger and you will see some of the shapes will disappear behind the WebObject indeed.

Leslie McKerchie

Hi everyone!

I wanted to update this discussion to share that we no longer see this issue where some shapes created in SL and that are supposed to be in front of a web object disappear when published and launched in Chrome/Edge when using the latest version of Storyline 360, Build 3.61.27106.0.

If you or others are experiencing any additional issues using the latest update, don't hesitate to contact our support team directly.