Forum Discussion
Overlapping States
I've been noticing a randomly occurring, but frequent, issue since the newest update. On some objects, the Normal/Original state will overlap with any other state (Hover, Visited, custom states, etc.)
So when you hover over a button, the text might change color, or an image might change, but the original text or original image can still be seen underneath.
Here is a quick example, a side by side screenshot from a published example:
On the Hover state, the icon is changed so that the bars on the chart sit a little higher when hovered over, though you can still see the original icon being used underneath when this happens. Additionally, you can see the stroke thickness looks more intensified as the images are overlapping. If I did this with a lighter text color on the hover state, and made it bold, you could still see bits of the original text peeking out from behind. I've tried testing this with .PNG, .SVG, .GIF, and other transparent files, but it happens with Storyline assets as well.
Here's another example using an icon built into Storyline. On Hover, the icon should just rotate 90 degrees, however, when in Preview or Published mode - the icon overlaps, and instead of having horizontal lines, we're left with a waffle/grid. Each example was made using a new Storyline file.
What's strange (or stranger) is that I can make a new state, set it to hover, delete all the objects on that new state, copy and paste in place the original assets used, and then swap the icon - and it will still happen.
The only workaround I have is to paste in place the base of the button (in this case the white rounded rectangle) two or three times, depending on any shape effects (e.g. drop shadows), which adding a bunch of objects to one state doesn't always yield the smoothest results once published. Additionally, in some circumstances, doing this causes a flicker effect on the hover state where the new button base flashes in before the rest of the other objects do, or the drop shadow will flicker when hovered over.
Fixes? Workarounds? Is this a known issue that needs to be patched?
Hi Chantall, and welcome to the E-Learning Heroes community! ✨
I apologize for the issues you are having with states overlapping.
It would be helpful to take a look at your project file so we can investigate further and try to replicate the behavior you are experiencing. You can do that publicly here, or privately in a case. We will delete it from our systems when troubleshooting is complete.
Hi Katie,
Sorry to hear that you ran into this issue. I can confirm that I was able to observe the behavior on my end as well, and troubleshooting steps such as importing the slides to a new project file didn't help fix it.
We are currently tracking a known issue that causes non-normal state to show all objects from the normal state even if the non-normal state does not contain them. I went ahead and opened a support case on your behalf so we can verify if this is the same bug that is affecting you, as well as discuss possible workarounds for the issue. Thanks for raising this with us, and someone from our team will be reaching out to you shortly.
Hi Admin Qulturum,
It looks like you shared the same file as Katie's. If you're experiencing a similar behavior, please open a support case here so we can check what's happening.
Hi Articulate. I also experience this issue. I have mentioned it a few times in the past and seem to get fobbed off with a "that's expected behaviour" response.
Great to see that there seems to be an admission that "We are currently tracking a known issue that causes non-normal state to show all objects from the normal state even if the non-normal state does not contain them."
This has been an issue for a very long time. What does it take for it to become an issue? When a certain amount of users complain? When an indefinable amount of time passes? When development budgets allow for troubleshooting?
No workaround? Anyone? Anyone?
I can confirm this is still an issue, and is not expected behavior. What I see in Edit Mode does not matched the previewed or published course. I just submitted a case.
I thought perhaps it was because anything outside the initial bounds of the button shape are ignored, but my attempted fix (starting with an oversized white box, and placing all additional layer objects on top of it) also shows this bug, See sample here (Storyline file also attached): https://360.articulate.com/review/content/89fc3706-9f38-4161-a5b1-bc4b7f684c3e/review
Hello Benoit,
Good call on opening a support case! I can see that my colleague Lianne is now testing your project file. You're in good hands, and we'll let you know about our findings through the support case that you opened.
Yep, agreed Spencer. This is far overdue to be fixed!
I have the same problem. Would love to hear what Storyline's workaround suggestions were for the previous commenters
Since I created my support case, there has been no update from Articulate on an official solution of fix. The two main "user contributed" solutions seem to be:
- Use custom triggers and states instead of the built-in Hover state.
- If using the built-in Hover state, make sure there are shape or picture elements that cover up every pixel of the Normal state. Anything transparent in the Hover state will reveal the Normal state underneath.
I've tried option 2 and it still doesn't work
States (block filled shapes):
Preview (states overlapping):
I figured out a work around.
This happens only with the built in states. Create and edit custom states that do what you want, and they should alleviate the problem.
Articulate, please fix the states so we only see the what is in the individual states, no overlapping of states. This is making me waist lots of time.
I have had trouble with this and it's been eating up my day trying to find a solution. I decided that I would simply hide objects without using states, but then ran into the problem of not being able to hide groups.
I did find this video which lists a few approaches to the problem of hiding groups of objects, which may helpful for some: https://youtu.be/1Fijh2DqDiM?si=ItU5fU29Hhq0AtnG
