Flip cards - Fade affect: Can't read text

We are having many flip card block issues with what looks to be an automatic fade applied to the card when there is text that reaches the bottom of the box.  Sometimes there is a scrollbar to extend the text, but sometimes not.  See attached image.  Is there a reason for the fade affect?  Our users can't read the text since it is auto-faded.  Thanks!

NOTE: Perhaps this is tied to the issue reported here of a problem when using only 2 flip cards?

36 Replies
Ashley Terwilliger-Pollard

Sorry you've hit this snag too, Stephanie! 

Two of the workarounds to try while our team investigates this are:

  • Use one 1 Flash card, or more than 2 - it only seems to occur with 2 in a row
  • Disable Block animations 

Let me know if you're seeing it with either of those steps already in place. I'd love to see your Rise course if that's the case! 

Ephraim Ross

Now that my team is starting to do more serious development with Articulate Rise, we're starting to run into more little frustrations like this. With flashcards in particular, my experience is that the text is often blurry -- in addition to the faded bottom text that everyone is describing here.

That said, I have identified what I believe is the issue if anyone wants to update their CSS file (from the published Rise output files) to push the fix. The responsible code can be seen below:

.block-flashcard__center--long.block-flashcard__center--overflow:after {
opacity: 1;

You will want to change the opacity to equal zero, instead of 1. Your fade issues should be cured.

Please note that I haven't tested this much yet, however. They may have some alternate code for IE, for instance, that won't be covered by this one change.

If anyone else is having issues with the fuzzy text, I should be able to provide a simple CSS fix for that as well. I'm really hoping the Articulate Team can just make these improvements out of the box, though, so we're not all making manual stylesheet updates whenever we publish a new version of a course.

S Marbukh

Thanks, Ephraim! I'd be interested in the CSS code to fix fuzzy text if you have it.  I've never had issues with it in Rise before, but I've got a client seeing fuzzy text on the back of flip cards in a recently published course. I had them open in multiple browsers just to see if it was the browser causing the problem, but the fuzziness appears in all the major ones (Chrome, Firefox, IE).