Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1664
  • Last Modified:

Blurry Images in Chrome - but ok in IE and Firefox

Hi All,

I am noticing some strange behavior with a line of images... the images Bronze Package, Silver Package, Gold Package, and Platinum package seem to be dithered for some reason when viewing in Chrome? In IE and Firefox they see ok... Have you guys come across this before?? Its the first line of images under the menu.. www.allwebcademo.com.... they seem to be blurry as well in mobile....
0
virtuali1151
Asked:
virtuali1151
  • 6
  • 5
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
Looks the same to me.  However, it is a 'responsive' page where the images change size with the size of the screen.  Press Ctrl-0 to set the zoom to 'normal' or 100% to make sure you are viewing it at the same scale in both browsers.
1
 
Ben McNellyCommented:
Dave is right, the responsive scaling is causing this, but only the border (border is part of the image) is showing artifacts when scaled (for me at least).

If you remove the border from the images and just use CSS it should render crisp as it scales with the image. Another option would be to make the border thicker, or adjust the way the image scaling is done with css.

For example you could give those images an extra css class that overrides the media scaling and lets you resize them or set specific image url's for different sizes of the screen.

Here is a great write up by Smashing Magazine about different methods to responsive images, including using the picture element, srcset and server side solutions.
0
 
virtuali1151Author Commented:
Hi Fellas,

Sorry for the delay, I am still having the issue, I figured out it is not just the images, it also some text etc that goes blurry at 1600x900 resolution... but if I change my screen resolution 1680x1050 the images and the txt are clear again??? So it seems to be something with how the site is resizing at that resolution... and suggestions?? I think the css might need to be changed somehow..
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Dave BaldwinFixer of ProblemsCommented:
CSS will probably have no effect on that problem.  What is the native and recommended resolution of your monitor?  At any other resolution, your video driver is doing the resizing.
0
 
virtuali1151Author Commented:
this monitor is 1600x900, that is the recommended resolution.  I have all the drivers etc updated. and still the same issue... when I use another monitor that has the 1680x1050 resolution the images and text etc are clear... but if I change that same monitor to 1600x900 the images go blurry just like the one I am using now... something that resolution causes the images and txt to go blurry.. and chrome really seems to be the culprit especially.. its driving me crazy cause I cant pin down the issue...
0
 
Dave BaldwinFixer of ProblemsCommented:
When you change from the 'native resolution', you are compounding the problem.  Even if there is a problem with Chrome, it will be masked by the mismatch with the video driver.  

If you can change the 'problem' monitor to the higher resolution, then I suspect that is really it's native resolution.  I have never seen a monitor that could be set above it's native resolution.  I have seen pictures where the browser zoom has been changed to put a large picture into the window.  That can affect the clarity of the image.
0
 
virtuali1151Author Commented:
Im not changing it beyond the native resolution on the issue monitor, I did a test on another monitor to see what happens if I go beyond the 1600x900 resolution... and the same issue.. at 1600x900 the issue is there.. the images are blurry... (That is not the native resolution for that monitor) 1680x1050 is, and when I change it back to 1680x1050, the images are clear.. on both monitors it just seems the 1600x900 resolution seems to be the problem.... could it be something because I have the theme setting on site to default to 1200px wide?? Would that cause an issue with the 1600x900 setting??
0
 
Dave BaldwinFixer of ProblemsCommented:
1200px wide??  Maybe... if it is a responsive page, it might be scaled though I would think that since 1200 is less than 1600 that it would just show the 1200 pixels and not expand to full screen.   ??
0
 
virtuali1151Author Commented:
Hey Dave... After all this I found the problem... My screen was at a higher zoom rate and not at a 100%...  duh... I hadnt even noticed at all... after I did a control 0 in the screen it went back to normal...  Thanks much for you input though....
0
 
Dave BaldwinFixer of ProblemsCommented:
I suggested pressing Control-0 in my first response to your question.
0
 
virtuali1151Author Commented:
Sorry Dave is right.. I didnt see that in his first response. Tks.
0
 
Dave BaldwinFixer of ProblemsCommented:
Thanks!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now