Highlighted

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

New Here ,
Mar 09, 2020

Copy link to clipboard

Copied

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:

Browser-ViewBrowser-View

XD-View:

XD-ViewXD-View

Views

351

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Mar 09, 2020

Copy link to clipboard

Copied

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:

Browser-ViewBrowser-View

XD-View:

XD-ViewXD-View

Views

352

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 09, 2020 0
Adobe Employee ,
Mar 09, 2020

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 09, 2020 0
New Here ,
Mar 10, 2020

Copy link to clipboard

Copied

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)

 

component-exploration-details.png

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 10, 2020 0
Adobe Employee ,
Mar 10, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 10, 2020 1
New Here ,
Mar 10, 2020

Copy link to clipboard

Copied

Hey Preran,

 

thank you for your investigation. Sounds pretty weird. So your Prototype-Preview in Browser looks correct?

I already extracted the specific part anyway. So I might upload it and share it with Harshika.

 

Thanks alot,

Florian

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 10, 2020 0
Adobe Employee ,
Mar 24, 2020

Copy link to clipboard

Copied

Thank you for sharing the file with me. I will investigate on the file and if required I will escalate it to the team.

 

We really appreciate your patience.

 

Thanks,

Harshika

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 24, 2020 0