I have a website made in Magento, and some of the product images on the product pages are blurry in Firefox and Internet Explorer, but not Chrome or Safari. EDIT: Actually, I just noticed that it does it briefly on Chrome before fixing itself.
Any ideas on why this is happening and how I can fix it?
The URL is: http://centaurrecords.com/store/johannes-brahms-piano-pieces.html
Thanks!
Your zoom module uses full images that are being scaled down by the browser, what does not give the best results. Most modern browsers automatically optimize scaled down images, but some gives a better rendering than others (this is why the image is nicer with Chrome).
Related
I'm currently trying to test out this new css rule, which fixes the blurry retina image downscaling in Chrome.
I described the problem in detail here: Blurry downscaled images in the Chrome 84
The rule I applied to my img tags is this: image-rendering: -webkit-optimize-contrast
While it fixes the blurry problem in Chrome, I heard that it can mess up how images look in Safari. I'd really appreciate if someone who uses Safari on a Retina display (laptop) would check if images on this site are displayed correctly (nice and sharp). There should be no ripped/grainy edges or anything like that.
Looks good to me.. Would comment, not enough reputation points.
Images:
We are using a png image as our logo on our main site. The image is about 85x57 pixels. Whenever we are viewing the website on Chrome, the image looks smooth. However, on firefox the image is grainy and one can distinguish each pixel. Is this a common browser issue with Chrome? Or is there a quick fix for this?
The "grainy-look" could be the result of a bug in Firefox as mentioned in this post.
Browsers have different methods of interpolating images when NOT rendered at their native size.
Best advice: render the image at its native size.
I was looking at the thumbnail image in a Shutterfly rss feed and the link is
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000039100AYtWzNi4Yt2Qg
and this renders out a ~3KB thumbnail, as expected.
I compared it to the link to the image on the actual Shutterfly page, which has the same apparent link:
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000035100AYtWzNi4Yt2Qg
But when I click this link, it renders out a ~60KB image.
I've looked at this in Fiddler and Chrome Dev tools and can't see anything different in the requests that would tell the server what size to render. I've even tried copying these links into Firefox to see if it was a browser/cookie type issue but they render differently there too.
I'm driving myself crazy trying to figure out what's going on. Can anyone shed some light on this?
The two websites are different.
Thumbnail:
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000039100AYtWzNi4Yt2Qg
Original:
http://im1.shutterfly.com/procgtaserv/47a2d624b3127cce9854b08c5baa00000035100AYtWzNi4Yt2Qg
I opened both links in different tabs in Chrome. Then, flipped back and forth between the two tabs, staring at the URLs. There was a minor flash where the 9 changed to a 5, and vice versa.
I've got a Wordpress site with some CSS3 rules applied to some images that rotate the images and have a hover effect on rollover too. Problems are showing up in Safari & Firefox when you hover on and then off these images and I can't seem to locate any similar issues by people on the Interwebs.
See http://tinyurl.com/3n2eude and hover on and then off the images (the slightly rotated ones):
Member name goes blurry and then back to normal (Firefox)
Member image border becomes jagged (Firefox)
A big black line displays to the side of the member images sometimes when you hover back and forth between two member images (Safari)
If I disable the transform:rotate rules, it's all fine. So seems to be an issue with that rule. Just can't work out how to get around it.
Anybody got some ideas on how I could get around these or what might be causing it?
Thanks for any ideas you might have!
Bit old of a question but that problem is related with rendering on browser (from what I understood). It cannot be fixed on CSS/HTML side. It must be fixed on user side.
Fix: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/
More information about problem: CSS3 rotate - rendering problems in Firefox and Safari
Created a website, looks pretty solid on the desktop. (http://foo.com) Used an .htaccess redirect to send those using mobile browsers to subpage (http://foo.com/m.html). Redirect is working like a charm.
My problem is that one image (and for that matter, the background color) doesn't display on the mobile page, on any mobile browser. I've tried reformatting it (.png, .jpg, .gif), resizing it (down to 55p x 44p). It is the only image on the page. I've tried using a css stylesheet specifically for the mobile subpage, I've tried not using a stylesheet at all and simply putting the image in the body. Nothing works. I've searched for an answer but all I can find is 'why doesn't my wallpaper display on my mobile phone', which doesn't help at all.
Anyway, if someone knows what I'm doing wrong, I'd really appreciate it. Thanks all!
I've got the same problem, I've done a very simple page, with a single image inside, surfing there with desktop was all right, while going there with a mobile makes the image invisible, it takes the place, but without display, like with "visibility:hidden";
after some tries, i've noticed that the image was saved in a CMYK color space, I've converted the image in RGB color space and then all goes right.
mobile browsers seeams to not manage the CMYK image versions...
Look at CSS part:
background-image:('background.gif')
Do You think all is OK here? Because I think it's not...
https://developer.mozilla.org/en/CSS/background-image