Skip to main content
F
flo_satow
Participant
March 9, 2020
Question

Images set up to blending mode-overlay appear not transparent in browser-preview

  • March 9, 2020
  • 1 reply
  • 928 views

Hey peeps,

I'm currently rapid-prototyping with XD which works like a charm.
I just got a problem with transparent pngs inside components in browser-preview.


Case 1:
Component contains several nested components, all of them set to 100% opacity except not needed ones - everything fine

 

Case 2:
Same component-combination. One nested component, containing several transparent pngs, set to opacity 87% - results in a greyish background of that component in browser-view.
When changing component-opacity to 100% and image-opacity to 87% it seems to work again. Bit weird, but acceptable.

 

Case 3:
Same component-combination BUT inserted multiple layers with transparent pngs, set to blending mode "overlay". PNG and component set to 100% (after former exploration ;)) but everytime I check browser-view, I'm getting a non-transparent result.

 

Any ideas, how to fix that?

 

Kind regards,

Florian

 

Browser-View:

XD-View:

    This topic has been closed for replies.

    1 reply

    Harshika Verma
    Community Manager
    Harshika VermaCommunity Manager
    Community Manager
    March 9, 2020

    Hi there,

     

    Thank you for reaching out and using Adobe XD. Would you mind confirming if it's happening with this specific file or all the files? What is the OS and XD version of your machine?

     

    I will try to reproduce the same at my end and will get back to you with my observation.

     

    Thanks,

    Harshika

     

     

    F
    flo_satowAuthor
    Participant
    March 10, 2020

    Hey Harshika,

     

    thank you for your quick reply.

    I'm using Catalina (Mac OS) latest version and the current version of Adobe XD.

     

    I tested multiple files now (created new ones) and it seems, that this happens in all files.

    BUT: I`ve been able to locate, when the transparency-glitch appears.

    Somehow, when grouping a transparent png (opacity doesn't matter) with another one (blending mode set to overlay), i`m getting a non-transparent background.

     

    See attached screen:
    (Right side full comp to left side single pngs)

     

     

    Preran
    Preran
    Legend
    March 10, 2020

    This is what I did.

     

    1. Imported a PNG file with transparency into XD
    2. Made a copy of the PNG file and set it to Overlay
    3. Grouped both the objects
    4. I see that transparency is still respected.

     

    Let me know if I need to do anything else.  If you are OK with sharing your files, I suggest uploading them to a shared location and share the files with Harshika for investigation over a private message. She can investigate and log a bug with the team if necessary.

     

    Thanks,

    Preran

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices