Overlapping States
Apr 05, 2022
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?
61 Replies
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.
I get the exact same problem. Is it solved?
Hi Dan,
Thanks for reaching out! I understand you are seeing both your visited and normal button states after returning to your base layer. I have opened a support case on your behalf. You may have seen the support email that was sent. Our support engineers will be in contact soon to help you through this issue.
Solution currently is to make sure objects in different states completely cover up objects from the "Normal" state. I added a filled circle under the checkmark in your "Visited" state to fix your particular issue Dan.
This post was removed by the author
Hi Benoit, Thank you for the tip. I had already done that as a quick fix but this time I sent in to the forum/support. They shoild fix the problem, it's been around for a while.
Caitlin, check Benoits exelent solution a couple of comments up and download the example file.
Hi Benoit, I read your post a little to fast, but now I have just went through my email and read your post again. I did not solve it as you did. I just put an extra button on another layer. Your solution is much better. Really smart and easy, I will use that on every button. Thanks!
Yep, it's really bad and needs to be fixed. I've also escalated a case and here's my sample button file that shows something different on each state. When the learner clicks the button you can see 3 overlapped states (Normal, Over and Down).
It's a complete mess!!!
Hi Brett,
Great call opening a support case! I see that you're currently working with my colleague Philam. You're in good hands! We'll continue the conversation over in your support case.
Have a great start to your week!
Hi - Experiencing the same thing, in different files. This was not an issue previously.
Instead of everyone creating multiple individual support cases for the same issue, is there a general workaround that can be shared publicly? Or better yet, a solution in the next update?
Thanks,
Edited to add:
What I did as a workaround: In the "hover" state, I added a shape (colored the same as the block, with no outline) to cover the area of where the "normal" state text is. This allowed the new text to display without an overlay.
Hope this helps someone until the issue is resolved!
I just ran into this issue myself, therefore, it's still a problem and not fixed.
I had a book that activated via Hover state, but I wrote on the normal state with a text box and it was overlapping the text on "Hover".
I deleted the text in the normal state and added a text box on top of the image, then created a trigger for the text.
Set State of "Text Box" to Hiden when user Hovers over "Picture" Restore previous state when user hovers out.
Hi Amber & Heather!
Sorry to hear that you also have been affected by this behavior! Thank you for reaching out and sharing a workaround you found helpful!
We are still tracking a known issue that causes non-normal states to show all objects from the normal state even if the non-normal state does not contain them.
If you would be willing to share a copy of your project file here in the discussion or privately through a support case, we’d be happy to take a closer look and verify if this is the same bug that is affecting you.
In the meantime, here’s a closer look at how we identify and tackle bugs.
Hi,
It's almost a year and a half later since I first posted this topic, the issue is still present, and my go-to (temporary) fix is still the same: copy everything from a state (ie: Visited or Hover) with CTRL + A, delete it while everything is still selected, and Paste in Place (CTRL + Shift + D) on that same state. Again, this is an issue because it unlinks the states (which is part of why it works), BUT that means that any changes done to one state have to be manually done to the others individually, instead of updating automatically.
Another option is to use Custom states in lieu of the built-in states, and set custom triggers. That's my last resort, but it works consistently.
However, both of those fixes are time consuming, even if it's a minute or two. I've seen other people's fixes and still they're time consuming to some extent. That time adds up when you do it on every state, on every interactive object, on every slide, on every project. Being able to use/create states is a major function of Storyline, so I had hoped this would've been addressed more urgently or transparently, instead of seeing another comment about another support case being opened for the same issue we're all having. Though I do greatly appreciate the Articulate and Storyline team!
Is this on the radar to be fixed anytime soon?
Yep, agreed Spencer. This is far overdue to be fixed!
Okay, so it's starting to do this more? I just had my hover state overlap with every state being it's own unique state. Every state had everything deleted off of it and everything. What's strange is that it was working fine, and then after publishing someone pointed out that issue was suddenly present, and so it was. Then when I went to try it out in a Storyline preview, the issue was suddenly present there as well. I have to bring this up because I literately had to create a workaround on this slide as it was having the original issue like in this forum, that's when I replied a few days ago. I got it to work, and now it's doing it despite that.
Good news, if you need to do a Click to Reveal or one-off Visited state, I found another silly solution that prevents the Hover state from going rampant; forget the Visited state entirely. Pretend it's gone. Instead, use the Disabled state. Set up a trigger so when X is clicked the state is changed to Disabled. Then, if you need it gated, set a trigger for when the state of all buttons is Disabled. Since the button is disabled, the Hover state shouldn't be able to be activated.
Is there any update or news on when this might 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:
I've tried option 2 and it still doesn't work
States (block filled shapes):
Preview (states overlapping):
It is difficult to show how the #2 fix works, since you cannot view Layers while editing States.
So here is a sample file. I hope this helps.
Preview: https://360.articulate.com/review/content/9c9e0ee1-521a-40d6-affe-b2a3bca8a210/review
Actually, that's one of my pet bugbears about Storyline, and it is a badly needed 'feature' - the ability to view items within a State as layers - some sort of popup timeline, or a 'micro-timeline' that becomes active once in the Edit States mode would be awesome.
Sometimes, in files I inherit, there are lots of items hidden in the background behind a shape (for whatever reason) and I usually only find out when troubleshooting issues.
This is a very needed, time saving idea. The ability to be able to re-stack layers within a State would be brilliant instead of the guesswork of 'selecting all', deselecting the desired object, sending items to back, just to get to an element that was obscured in the background.
Actually I wonder if those layers existed would it help isolate the issue we're all seeing with the overlapping states?
It possibly could. Who knows. It certainly would make life easier in building better buttons.
There have been issues with the Hover State over-riding Selected States for years now, but Articulate's official position is that States behave in the expected way, and it's probably us, awkward and annoying people who are doing things wrong, despite EVERY client I have ever had asking for the button to display as Selected once it has been clicked (not dependent on the user's mouse moving off the button in order to display).
My default "solution" is to just focus on a Normal, Hover and Selected State, and/or Disabled if required. Visited States are essentially meaningless, as are Hover States (being honest) and it reduces the chance of issues by 50%. I tell my clients they do not need to know where they have been (I know, right?).
But it's the randomness that annoys me most. Sometimes, the only difference between my button states is the colour of the text, and sometimes it is the Normal State that trumps the Selected State.
If I did use a shape, such as a chevron, like in Jessica's example above, I find that (sometimes) choosing the Hover State, selecting all and then "send to back" can work as a solution to hide the Chevron's appearance on the Selected State (if Hovered over).
Then applying the workaround that Spencer Wolf mentions above about selecting ALL the elements within the Selected State, deleting them, and then immediately pasting them back in the same state. This seems to sever any connection with the Normal and Hover States, but hasn't really been working in recent versions of Storyline.
Programming the button to display a Disabled State that is identical to a Selected State seems to be the most 'efficient' workaround, as Spencer notes. It just has to be reactivated once another button is clicked (either via Trigger Variables or a Button Set).
But yeah, your mileage may vary. If you have a demo of what you created, it might be easier to describe a better solution.
And apologies to everyone for rehashing the basics.
The problem I have is that I like to shrink the elements on the DOWN state (by a few pixels in all directions) to give the impression that the button has been pressed down. Most of the time, I can still see the outer edges of the full-size Normal state. If the elements are all the same shape/size, between the states, the proposed workarounds are OK (still painful to have to apply and often catches me out. The moment one of the shapes of the states changes, you're stuffed!
Articulate, PLEASE schedule a fix for this!!!!