Blurry images on non-retina screens

[Glenn_Ashcroft]

Hello I need some help,

I have this site and on retina screens all the phone screen pics look sharp.

On non-retina screens however the phone screens in the first section at the top look fine, but in the sections below the text on the screens breaks up.

It is doing this in Chrome, Safari, Opera. But not in Firefox.

I have no idea why this is happening all the pics are the same size and they have all been marked as HiDPI.

Can anyone help please?

Here’s a screengrab, the text on the image on the left with the dark background is more readable than the text on the right hand image.

----------

Here is my public share link: http://cvlt.fitness/

Here is another version, http://cvlt-website-v4.webflow.io/

I don’t know if this helps but I’ve cloned the site, re-imported the phone images (which are smaller) and turned off the interactions on three of the sections.

1. CVLT fitness the new social workout app

2. WORKOUTS

3. JOIN A GROUP

And on a non-retina screen the images are all clearer and you can read the text within the image.

I’ve left interactions on for the last section

4. LEADERBOARDS

And the text within the image is blocky.

Is there a problem with the interactions I have created?

[McGuire]

For what it’s worth, here it is over here on Safari and Chrome, looking pretty great:

Safari

Chrome

[Glenn_Ashcroft]

Thanks for the reply, in the other sections below is the text as clear or is it a bit blocky?

[McGuire]

All sections look fine on Safari, starting at the second section, they look choppy on Chrome (OS X). Can you post your read only link? Share a read-only link | Webflow University

[Glenn_Ashcroft]

Hi, sorry im new to webflow, here’s read-only links

This is the original one I posted
https://preview.webflow.com/preview/cvlt-website-v3?preview=ab33a35c03ba0f9f043432d12bc8c3db

And this is a cloned version where I have turned off the interactions off on the first three sections and the images are a lot clearer, on the last one I’ve left interactions on and it still looks blocky in chrome.
https://preview.webflow.com/preview/cvlt-website-v4?preview=5fcf0cff77a1a6196136af3aea5549b3

[McGuire]

Everything looks fine on the interaction to me–hopefully someone else can chime in and teach us both a bit about this! One side note, if you right click the phone in Chrome and hit Inspect Element, unchecking this code forces Chrome to smooth the image out:

I know that doesn’t help much, but it’s something I observed!

[Glenn_Ashcroft]

Thanks for that, yes as soon as I uncheck that it goes much clearer.

could it be something to do with vendor prefixes? Do I need to add somethign like this?

-webkit-transform: translate

[McGuire]

You shouldn’t have to manually code any of this. Webflow is top-notch when it comes to outputting code that works. Have you emailed them at support@webflow.com? Really curious about an answer to this!

[McGuire]

@Glenn_Ashcroft, please see this quick page I created which seems to confirm this is a Webflow issue and has nothing to do with your website.

Link to demonstration.

These Webflow 2D transforms on Chrome (OS X) do not properly render, appearing noticeably jagged, particularly on a non-retina display as documented by Glenn_Ashcroft. This problem seems to be documented on Stack Overflow with a popular fix that Webflow does not seem to employ.

@PixelGeek and @callmevlad, could you look into this?

Edit: Quick screenshot of this behavior:

Click here to be taken to the page in the screenshot above.

Edit 2: This seems to be much larger than just Chrome for OS X, it seems to also affect images on Chrome for Windows, the most used desktop browser in the world. See screenshot:

[GlennAsh (Glenn Ashcroft)]

Thanks for that, I’m in England on the train home at the moment and that’s really helpful.

Thank you for that, I’ll look at it when I get in.

[Glenn_Ashcroft]

Hi I got that fixed, thanks so much I’d have never sorted it out without your help.

I just put this line of custom CSS in

<style> 
.cvlt-iphone img {
    outline: 1px solid transparent;
}
</style>

The text on the images of the iphones looks much clearer on non-retina screens now
https://preview.webflow.com/preview/cvlt-website-v4?preview=b3efa53809b9a7218fd3590a7070b1e4

[McGuire]

That’s great, but it still leaves the rest of Webflow users requiring a manual fix each time they use a simple interaction with transform and opacity.