Opacity problem in Rise
May 16, 2017
Hi,
We have just had a user point out to us that in several of places where we have placed text over an image, that it is unreadable because it is essentially displaying as white on white. We have been working in Chrome and it looked fine in our preview, but because of this feedback we have now discovered that it previews completely differently in Microsoft Edge.
Here's an example of what we mean, with screenshots of the same lesson in the two browsers:
Chrome:
Microsoft Edge:
Can this be fixed? There is also no option to adjust opacity or text colour on the above block (Quote on image), and it will be difficult to optimize the content for both browsers if it means previewing in two different places to get an overview of how it will appear to a user. Help!
19 Replies
Hi Cam,
Thanks for sharing the two examples here. I know I've seen it at least once before - but the odd part is that it seems image specific. We've got it reported to our QA team, but I'd love to get a copy of your image if you can share it! That way our team can use that example for testing too.
Thanks!
Hey Ashley,
thanks for the update. I have attached the image here. That being said, we have found it on different images too, all on light backgrounds. I have attached two photos that have had the same issue. Both images were used for quotes.
Thanks so much!
Thanks Cam for those other samples. I was playing around with it and saw the same as you shared. I did notice that I could use an image with text (another block type) and that one worked fine - so hopefully you can use that while our team continues to investigate the quote blocks.
Hello,
I have the same issue with the text disappearing when over an image using the Quote and text block. It views fine in Chrome but looks unreadable in IEv11, both are the latest version of web browser. Can you advise if there is a fix for this please?
Thanks
Ruth
Hello Ruth,
Thanks for sharing those images. I'll be sure to share these images with the team to get the conversation going again.
In the meantime, hopefully, the image with text block type will work for you as Ashley shared above.
Hi there,
I too have this problem with the opacity disappearing in IE and Edge but it works fine in all other browsers. Have there been any updates to this?? Also I have recently noticed that with the "note" block, IE and Edge remove the background color. While that is less of a problem I was just wondering if there have been any fixes to this issue with browser compatibility
Thanks!
Hi Elizabeth. I've added your comment to our documentation for the issue with the Note block not showing the background color in Microsoft Edge and IE 11. We can update you here with any changes to that behavior!
The opacity of the cover photo and an image with text looked the same in IE, Edge, and Chrome with my test file (it's in SCORM Cloud, and you can use a fake email to access it). Can you let me know here if you're seeing the opacity issue in another block type? You can also attach a screenshot and a link to your course. Thanks!
This is what I meant by the "note" block wasn't showing the color. That isn't a huge issue but just a difference in cross-browser compatibility. The main issue is the opacity not showing up in Edge or Internet Explorer, like mentioned in the start of this discussion and I just wanted to know if there was a work around or a fix to this.
thank you!
Hi Elizabeth,
Let's dig into this opacity issue a bit more. Please click here to access a sample Rise 360 course.
Then, take a screenshot of what you're seeing in Microsoft Edge and Internet Explorer. The 60% opacity block looks correct my testing:
Microsoft Edge:
Internet Explorer:
I am seeing it the way the floral images are at the start of this discussion topic. The opacity in the quote block seems to be removed in Edge making light text hard to read on a light image. there is no way to adjust the opacity overlay in the "quote block" like how there is in the "text on an image block"
Ah, now I'm seeing what you're seeing, Elizabeth. The opacity on the "Quote on Image" block is removed in the Edge browser.
Let me get this to my team to see how we can help. As soon as I know more, I'll pass it along to you!
This 2 year old bug should be gone by now...
:)
The opacity issue on the "quote on image" block is still present in Edge. Any updates on this bug that is over 3 years old? If it can't be figured out, perhaps Articulate should just remove the block type as an option altogether.
Thanks for letting us know you ran into this problem in Edge, Anthony. I don't have any updates to share right now, but we'll let you know if we get new information that will be helpful for you.
Just a note, I ended up upgrading to the "new" Edge browser yesterday and the problem is fixed there, so it seems to only be persistent in legacy builds.
I appreciate that follow-up, Anthony. Thank you!
Just had a similar experience with Edge.. my co-worker has no opacity issues in Edge unlike me. Found out, that his Edge is (85.0.564.44) 2020, mine is (44.17763.831.0) 2018. So somewhere in between these two updates, there's a fix.
I guess that also means, that the problem can't be fixed in IE.
Microsoft Edge browsers have switched to using the Chromium engine, so this is likely not a problem anymore except in cases where the client has not updated his/her copy of Windows.
I'd like to request opacity adjustments be added to "quote on image". My team is spending a lot of time adjusting images manually in Photoshop.
Thank you for that suggestion, Tara!