Hello, recently I have published several XD files to share with our dev team and released that some elements were having broken or missing background (see an example attached). All these elements have in common:Solid background color, similar to underlying element or artboard (e.g. white on #F1F1F0)Usually a light shadow (e.g. #000000 30%, blur 6px) While not critical, it is unpleasant because we have to check all published pages manually and explain developers how the design should actually look like 😕😕

Known Participant

Question

Publish: Broken element backgrounds in web view

Forum|Forum|5 years ago
December 9, 2020
4 replies
1773 views

Hello, recently I have published several XD files to share with our dev team and released that some elements were having broken or missing background (see an example attached).

All these elements have in common:

Solid background color, similar to underlying element or artboard (e.g. white on #F1F1F0)
Usually a light shadow (e.g. #000000 30%, blur 6px)

While not critical, it is unpleasant because we have to check all published pages manually and explain developers how the design should actually look like 😕😕

Share or publish

This topic has been closed for replies.

Martin MarekAuthor

Known Participant

@Ansubedi03 Please find the XD file here: https://www.dropbox.com/s/8a78p2yen3tdtge/Background%20test%202.xd?dl=0 . I use Windows 10 Enterprise version 1809 (OS build 17763.1577).

I have tried the idea from @Spas K. to copy the file, with the same result. I also tested with further browsers and it looked broken everywhere (Chrome, Firefox, new IE Edge with Chromium engine) except older IE Edge where it looked OK.

Spas K.

Community Expert

I haven't experienced this personally, but it is a known issue, at least for the users, don't know if the dev team has taken notice of it to fix it. There are a few threads about this, but they all seem to reach a dead end:

Thread 1, Thread 2, Thread 3. And there's probably more of them.

I guess you could try copying elements to a new file and publishing from it, to see if the problem persists. It seems to be some sort of internal translation bug when the prototype is converted to png's for the public prototype.

I remember one user had a problem on 1 device and not on another. Also, some browsers seemed to have the issue, and some not. From the link you shared, I don't see any issues:

I know it's not much help, but it's hard to identify these issues that happen randomly and there's no pattern of why or when it's happening 🙂

A

Ansubedi03

Community Manager

Hello Martin,

Thank you for reporting the issue. Have tried to recreate the issue using your reference images but unable to reproduce it.

Could you please provide clear steps to recreate and reproduce the issue. So we can investigate what is leading to background distortion and resolve it asap.

Regards,

Anita Subedi

Martin MarekAuthor

Known Participant

Hello Anita,

I created a rectangle with color #F1F1F0 and another bit smaller rectangle over it, with color #FFFFFF and shadow #000000 (16%), x=-2, y=0, blur=6. Similarly I created this for dark colors (#252C33 and #2F3740, same shadow). I tested the published result in current Chrome and Firefox on Windows 10 machine. XD is up to date (35.2).

Please find the published page here: https://xd.adobe.com/view/7329ff0e-f1ad-4a6e-8757-2d24a35e2185-267a/specs/ . It looks like the specs values are correct, just the rendering is broken. I can share also the source cloud XD file if you like, however I think it's easy to reconstruct it.

A

Ansubedi03

Community Manager

In provided link , I don't see any distortion. Have tested the link in Firefox and Chrome on Windows 10. Even tried by creating new file with given information in XD 35.2 , i don't know what is getting miss.

Attaching the image of your given link and it works perfectly fine for me.

If its still happening , Please provide the file and Windows 10 OS version.

Thanks ,

Anita Subedi

italosan

Community Expert

Hi, with which browser do you view your prototypes?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded