Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Iain Henderson
closed thread

Blurry Images in Invision when using Google Chrome on Non HiDPI displays

All of my designs synced with Craft Sync from Sketch look very blurry in Google Chrome 63 (They're OK in Firefox and Safari)

Here's a screenshot of design in Sketch:

Here's a screenshot of synced design in Invision in Chrome 63

 

It looks like Invision is loading a 2x version of the image for my non-HiDPI display, and then Chrome is scaling it down (and interpolating it) , which is creating the blurry images.

Shouldn't Invision using responsive images to pick the appropriately sized image for my display?  Wouldn't that provide crisper results, and faster load times for non-HiDPI displays?

To temporarily get around this issue I'm currently using the Stylebot extension for Chrome to add "image-rendering: -webkit-optimize-contrast" to the images. which makes them appear much crisper.

Here's a screenshot of synced design in Invision in Chrome 63 with "image-rendering: -webkit-optimize-contrast"  applied.

Is this issue fixed in the next version of InVision?

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by

official comment

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador Edited
Comment actions Permalink

Hi Michael,

I wanted to let you know that I have been following up with our Product Manager on a weekly basis about this issue. I'm terribly sorry for the frustration that this is causing for you, and I appreciate you taking the time to provide that explanation for other people encountering this issue. 

After speaking with our Product Manager on this topic, he noted that the best way to workaround this issue is to upload images that are properly sized for the device type that you are choosing. While I know that this is not ideal, I hope this helps a bit.

I will be sure to update this thread as I hear anything new from our Product Manager.

Thanks for your patience while we work on this issue,

Shaina

If anyone else is experiencing this issue, please contact our Support team directly here to report your incident.


Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador Edited
Comment actions Permalink

Hi Iain, 

Sorry to hear that you're having an issue with your files transferring over blurry after Craft Sync. Happy to help you troubleshoot this issue! In order for me to get a better understanding of why you might be running into this issue, please answer the following questions:

     1. Are you designing a web or mobile prototype?

     2. If you are designing a mobile prototype, what device are you designing for?

     3. What size are your artboards in Sketch? 

One last thing I would like to check, can you please make sure your Chrome window is not zoomed in? If you see the magnifying glass in the right hand side of the Address bar, you can click it and then choose 'Reset' to set your browser's zoom back to 100%.

Thanks,

Shaina

0

Iain Henderson
InVision ambassador Iain Henderson , ambassador Edited
Comment actions Permalink

Hi Shaina, thanks for your help.

Weirdly, after making some updates to the designs and resyncing the problem has disappeared for the most part. Although the image still blurs if I switch to 'build mode', or 'comment mode'

I'm designing a web prototype, my artboards are 1280px width with variable heights. The previous screenshots were taken from a board that was 8343px in height.

I checked several times that Chrome wasn't zoomed in. The previous images show that the text is the same size in Sketch and Chrome screenshots, so I don't think that was the issue.

Here's a GIF of me switching between Preview Mode, Build mode and Comment mode. The image shifts when the Invison toolbar at the top loads, but you can see the text blurring.

 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Iain,

I'm glad that you are now seeing non-blurry images! Sounds like the update and resync helped.

Thanks for checking in on the Chrome zoom as well. 

I see exactly what you're talking about with the images becoming blurred when switching between modes. This must be frustrating, and I apologize for the inconvenience. I am going to open a ticket on your behalf to notify our Support team of this odd behavior, and have them dig a bit deeper.

Please look for a message from them shortly.

Thanks for your patience,

Shaina

0

Duane Clare
InVision ambassador Duane Clare , ambassador
Comment actions Permalink

I'm having a similar issue lately. Was there a fix? 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

 Hi Duane,

Sorry to here that you're also encountering this issue. Can you please provide the following details?:

     1. Are you designing a web or mobile prototype?
     2. If you are designing a mobile prototype, what device are you designing for?
     3. What size are your artboards in Sketch? 
     4. What version of Sketch are you using?
     5. Can you please head to http://www.whatsmybrowser.org and then grab the share link (in the hero/header area)?
     6. What operating system are you using? Please include the version (e.g. macOS 10.12.1 or Windows 10).
     7. What version of the Craft plugins are you using?

Thanks in advance for this detailed information,

Shaina

0

Digital Channels
InVision ambassador Digital Channels , ambassador
Comment actions Permalink

Same here
I can't show my client this

I am:
designing for web
my artboards are designed for 1170px width
using latest Adobe XD 
OS Sierra 10.12.5

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Michael,

Sorry to hear that you're also running into issue. In order to get a better idea of what might be causing these issues, can you please provide these details?:

     1. Are you attempting this in Sketch or Photoshop? At this time we don't support Craft for Adobe XD, but it is on our team's radar as a potential feature request. Please let me know if you would like me to open a ticket on your behalf to track your vote for this compatibility with Adobe XD.
     2. Can you please head to http://www.whatsmybrowser.org and then grab the share link (in the hero/header area)?
     3. Can you please provide a screenshot of your "About this Mac" overview?
     4. What version of the Craft plugins are you using?
     5. What version of Craft Manager are you using?

Look forward to hearing from you,

Shaina

0

Joana Neves
InVision ambassador Joana Neves , ambassador
Comment actions Permalink

Hi there,
Same problem here :( Very disturbing!!

Here are the details:

     1. Are you designing a web or mobile prototype?
Mobile prototype

     2. If you are designing a mobile prototype, what device are you designing for?
Android 

     3. What size are your artboards in Sketch? 
360x640px

     4. What version of Sketch are you using?
Sketch 52.6

     5. Can you please head to http://www.whatsmybrowser.org and then grab the share link (in the hero/header area)?
CHROME 71
https://whatsmybrowser.org/b/97WH4K5
(it's also blurry on other browsers like firefox and safari)

     6. What operating system are you using? Please include the version (e.g. macOS 10.12.1 or Windows 10).
mcOS Mojave
version 10.14.2

 7. What version of the Craft plugins are you using?
V1.0.74 (127)

Have attached a screenshot so you can see how blurry it is.

Looking forward for your feedback,
Joana

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Joana,

Thank you very much for providing all of those details! That will certainly help our Support team troubleshoot to determine what might be causing this. I will open a ticket on your behalf with our Support team so that they can take a closer look at this. Please look for a message from them soon.

In the meantime, would you mind clearing the cache and cookies from Chrome, restart the browser and see if you continue to see the same behavior?

I apologize for any inconvenience that this is causing for you.

Best,

Shaina

0

Digital Channels
InVision ambassador Digital Channels , ambassador
Comment actions Permalink

I posted about this bug 4 months ago and assumed invision would resolve this or provide more guidance, rather than suggesting clear cache

I know from XD if I export for web @1x, it will also output a file @2x — this will display sharply in invision. You need to ensure your artwork is correctly exported and sized as retina resolution of 2x. This has worked for me

For some reason XD was not able to export retina sized artwork when I selected @2x

I hope this helps the designers working to strict deadlines out there!

0