Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Publish: Broken element backgrounds in web view

Explorer ,
Dec 08, 2020 Dec 08, 2020

Copy link to clipboard

Copied

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 😕

TOPICS
Share or publish

Views

370

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
community guidelines
Adobe Community Professional ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

Hi, with which browser do you view your prototypes?

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
community guidelines
Adobe Employee ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

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

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
community guidelines
Explorer ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

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.

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
community guidelines
Adobe Employee ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

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. 

background.png

 

 

Thanks ,

Anita Subedi

 

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
community guidelines
Adobe Community Professional ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

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:

image.png

 

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 🙂

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
community guidelines
Explorer ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

LATEST

@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.

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
community guidelines