Highlighted

[Bug] Development Share component background blur CSS mismatch

New Here ,
Oct 12, 2020

Copy link to clipboard

Copied

While development share enables developers to view css properties, in some cases an object in Adobe XD will not look the same if a developer chooses to use provided css snippets.

 

Simple example demonstrating the issue:

image1.PNG

 Artboard containing a background image with a blurred rectangle on top (expected result)

 

 

Adobe XD generates following css snippet:

top: 160px;
left: 160px;
width: 760px;
height: 760px;
background: #000000 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 0px #000000;
opacity: 1;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);

 

 

Actual result using above snippet:

image2.PNG

 

 

However this can be fixed when

 

background: #000000 0% 0% no-repeat padding-box;

is replaced with

background: rgba(18, 18, 18, 0.4);

 

Finding the corresponding color values does take time unfortunately, it would be great if the team behind Adobe XD could fix this issue for faster, more seamless workflows.

TOPICS
Prototyping, Share or publish

Views

103

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

[Bug] Development Share component background blur CSS mismatch

New Here ,
Oct 12, 2020

Copy link to clipboard

Copied

While development share enables developers to view css properties, in some cases an object in Adobe XD will not look the same if a developer chooses to use provided css snippets.

 

Simple example demonstrating the issue:

image1.PNG

 Artboard containing a background image with a blurred rectangle on top (expected result)

 

 

Adobe XD generates following css snippet:

top: 160px;
left: 160px;
width: 760px;
height: 760px;
background: #000000 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 0px #000000;
opacity: 1;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);

 

 

Actual result using above snippet:

image2.PNG

 

 

However this can be fixed when

 

background: #000000 0% 0% no-repeat padding-box;

is replaced with

background: rgba(18, 18, 18, 0.4);

 

Finding the corresponding color values does take time unfortunately, it would be great if the team behind Adobe XD could fix this issue for faster, more seamless workflows.

TOPICS
Prototyping, Share or publish

Views

104

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
Oct 12, 2020 0
Adobe Employee ,
Oct 12, 2020

Copy link to clipboard

Copied

Hi there,

 

Thank you for reaching out. Would you mind checking this post: https://community.adobe.com/t5/adobe-xd/hsla-color-format-values-are-incorrect-in-prototype-specs-vi... and see if this is similar to the issue you're facing?

 

If so, then the team is aware of the issue and is working on it to fix the problem. 

 

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...
Oct 12, 2020 0
XATEV LATEST
New Here ,
Oct 13, 2020

Copy link to clipboard

Copied

Hi Harshika,

 

The referred post mentions HLSA value inaccuracies, whereas the generated snippets in this post doesn't seem to contain any HLSA values.

After taking a closer look today, it seems like the generated css snippets only apply the fill color but not the background blur:

tempsnip.png

 

Generated css snippet:

top: 160px;
left: 160px;
width: 760px;
height: 760px;
background: #FF3737 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 0px #000000;
opacity: 1;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);

 

Result using above snippet:

tempsnip2.png

 

It looks like this is not an issue related to rounding color values since the differences seem more significant. 

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...
Oct 13, 2020 0