Help with Bug Fix: Repeater Card/Dynamic Panel Actions

newbie-question
#1

Hi All,

I’ve run into a bug that I am sure is an easy fix but I can’t seem to find a fix. Hoping someone might have some ideas :slight_smile:

My goal: To create repeater cards for various products. When you move your mouse on the product card it will flip to it’s back and show a few product details. When you move your mouse off the particular product card it should go back to the default state of the product card (which is an image and a title).

The bug: I am finding that when I preview this it will initially flip the card, but if I try to do it a second time the page will jump up to the top of the page and the repeater cards then also start to overlap. In addition to this the page also now seems to keep jumping up to the top when I try to scroll back to the repeater area and if I try the second dynamic panel below the footer.

What I’ve tried: I tried to duplicate this flip card behavior with a completely separate dynamic panel that has 2 states, then trying both a mouse enter/mouse exit event that changes the state from one to the other with a flip animation. I’ve also tried doing it with an on click event to change the dynamic panel state too. In either of these attempts the first time moving the mouse or clicking the card will correctly flip the card to state 2, but then when I try again the page will just jump to the top again unexpectedly. I suspect that what’s causing this is the dynamic panel behavior but I don’t know how to fix this behavior.

Here is a link to my particular file and a link to the demo that shows this. I’ve added titles in red to show where I am referring to.

RP 10WJF-Prototype-ECommerce.rp (432.4 KB)

Any help would be appreciated!

#2

The stacking problem can be fixed by unchecking “fit to content” in the card repeater’s style panel.

As for the jumping up to the top of the screen… this is definitely an Axure bug. Apparently your automatically-advancing carousels are causing this. You can verify by deleting the panel state changes from the “page loaded” interaction. I tried several workarounds:

  • moving the panel state changes to the panels’ own “loaded” interactions, instead of the page’s
  • “manually” changing the states via wait and fire event, instead of using the “repeat every x milliseconds” option
  • swapping the images via hiding and showing instead of panel state changes (this still requires a recursive “fire event” to keep it going, which seems to trigger the weird jumping behavior)
  • Building a repeating chain of interactions by having each image handle hiding itself and showing the next – this was an improvement; the jumping still happens but there’s less of it for some reason
  • starting fresh with a new Axure file and copying the contents of your canvas into it
  • correcting the hero banner’s timing values (you’ve got the fade transition happening over 3500ms and repeating every 1000ms, which I believe you meant to be the other way around)

One of the Axure folks will need to take a look at this, I think; seems like a pretty serious bug. This kind of use case is common. @BenHoang_Axure

Editing to add: it seems like the combination of the auto-advancing and the mouseover events on the product cards that’s causing the jumping. The auto-advancing on its own doesn’t trigger the jumping; it only happens when the mouse enters one of the product cards while there’s an active carousel.

#3

Thanks Luke for bringing this to our attention. We were able to further investigate the issue occurring that is causing the window to unexpectedly scroll to the top and can confirm it happening on our end too.

This seems related to a filed bug report discovered and fixed earlier last year that relates to the “flip” animation causing this unexpected scrolling. It looks like it is occurring again on our most recent builds so I’ve notified our QA team on your behalf to reopen the ticket to reinvestigate.

In the meantime, this issue occurs when there are different animations occurring simultaneously when at least one of them is using the “Flip” effect. If your project contains a continuous looped animation, then we recommend you avoid using this animation for the time being.