Forum Discussion
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
+1 for removing the fade effect. I didn't realise it had done it because the flashcards initially looked full-size when editing the block, and that worked much better than the scroll which seems to make text blurry too.
Commenting so I can be notified if anything changes :)
Please fix this Fade effect.
I applied bold to the text to increase the contrast. This is a big issue when it comes to readability and accessibility. Would love RISE to at least meet WCAG 2.0 level AA and maybe WCAG 2.1 in the near future.Thanks for your feedback Karoline and Jason!
Accessibility is top of mind for us, so we're actively working on improvements. Stay tuned to our What's New page for updates.
+1 for removing the fade effect
Thanks for the feedback Michelle!
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.
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).
Any update on this yet?
Hi Rebecca and Amber!
Are you still experiencing an issue with fading for the Flash Cards when using this interaction block?
If so, could you please let us know which browser and version you're using?I'm also seeing this in a course one of my colleagues shared with me today. Additionally, I have noticed that the text inside accordions and other interactions is often smaller and harder to read than main body text. This really ought to be fixed by now!
Hi Nicola!
If this is in published content, it may have been published before the fix was implemented. They would just need to publish this again to get the fixes in place and clear out their browser cache.
If you still see this issue when Authoring or Editing a course even after clearing your browser cache, could you please let us know your browser + version number?This is a course still under development so I'm looking at the edit/preview view.
I'm using:
Google Chrome
Version 87.0.4280.141 (Official Build) (64-bit)Thanks
Nic
Thanks for that example and details, Nic. I'm seeing the same thing with unnecessary fading, and I'll bring this issue up with our team again. I'll let you know if we release an enhancement so those bottom lines of text aren't hard to see for learners.
Accordion and tab interaction text is slightly smaller by default as a part of those blocks' design. You can edit the font size of those blocks in the editing window. Body text is set to 17 by default.
I have this issue showing up on mobile, and it is frustrating. I do not know how to work with CSS (or even what it is). I do not see the purpose for the fade effect at the bottom of the card, and would like to know how to turn it off. Turning off the animations did not change anything.
Hi Shaunna, sorry to hear you're experiencing this issue. We've got this documented and I'll share this with my team. Can you please share your device OS version and which mobile browser you're having trouble in?
Android version 9, but happens on mobile preview on my computer as well. I
don't think it is an operating system bug, since it happens both on my
phone when I see it in review and on the computer when it is review or
preview.
Same issue with the unnecessary fading of the text at the back of the Flashcards. This has been raised 3 years ago.... When can we expect the fix for this, please?
