March 21 release of Storyline is changing the way webojects size on the stage

I thought I posted this early but now I do not see it. Attached are screenshots of the same web object, one published using the April 26th update (webobject broken.jpg) and the other with March 21 version of Storyline (webobject working.jpg. Basically it is no longer responding to the browser size changing. I had to revert to April 26th release to get it sizing properly again. 

37 Replies
Crystal Horn

Hi there, Curtis. We've discovered an issue where web objects aren't displaying correctly with the modern player in update 26 of Storyline 360. I'm sorry you're being affected!

I'll make sure this discussion is updated with any changes. It sounds like rolling back to the previous update (February 26) is working for you now, but please let me know if you are hitting any roadblocks.

Curtis Wiens

Okay I got two examples up. Both the exact same web object, same slide. One using Feb 26 version of Storyline and one with the release put out today, June 18th. 

This does not scale beyond its size 1618x1014, which is our stage size
Today's release: https://360.articulate.com/review/content/1e2946e5-e84f-4e76-ba0f-7fc91372415c/review

This does scale both when you expand the browser window and when you shrink it. 
Feb 26th https://360.articulate.com/review/content/6cfc163a-169e-47af-8b22-1c0b065e83e4/review

We make everything for Chrome BTW. Our entire user base is on Chrome. 

Michael Anderson

I know that a change in Storyline has caused this issue, but a solution may lie in the authoring tool you used to create the svg animation. I played around with the animation variables some, but was not able to get it to resize dynamically with the browser window. May I ask what app you used to create the animation?

Michael Anderson

You might try that and see what happens. I've attached a screen recording of the VideoJS player inserted into 360 as a web object. You can see that it scales very well with the rest of the project. The video tag used to insert it has an attribute of height="100%". Below is the CSS used to style the page.

html, body {
margin: 0 0 0 0;
overflow:hidden;
}
.mydivouter{
position:relative;
background: #000000;
width: 100%;
height: 100%;
margin: 0 auto;
}
.mydivoverlap{
position: relative;
z-index: 1;
}