Images blurry and crispy in Internet Explorer - Wordpress - html

I have a problem with images being blurry and crispy in internet explorer. Sometimes it happens in Edge too. I first thought it was because some of the images was being resized by the browser, but I have tested it without forcing the browser to resize and than does not trigger the problem.
Anyone got any ideas how to fix this?
See examples here

Related

CSS error on Safari, it works on Chrome

I am trying to make a website and was looking at this template (http://www.uipasta.com/wordpress-preview/rolling/).
I really liked the "testimonials" part and was trying that on my code.
However, I realized that "testimonials" part works totally fine on Chrome with any browser size, but not on Safari.
All the elements of testimonials get overlapped on Safari when I first open it up... It's funny because if I shrink or enlarge the browser and keep doing it like that, the elements stop overlapping and work perfect like on Chrome.
I tried to modify some stuff in css files and tried to find a bug.
But, all the attempts failed in vain... Can someone help me out with this?
LOL I can't even upload more than 2 links yet, because i don't have enough reputation... Here is how it looks on Safari, https://i.stack.imgur.com/kza7d.jpg
but yeah that's how it looks on Safari when it should be clean carousel moving objects.

Why does this webpage flicker a lot on Microsoft Edge?

The webpage which I am currently front end coding is https://www.softpaz.com/software/download-jetbrains-webstorm-windows-180745.htm
Issue is that the
1) sidebar sometimes gets transparent
2) div background are blank, then suddenly appear and then go blank again.
3) The buy links table has flickering borders
4) Most of the small icons are flickering
These things happen when scrolling in Microsoft Edge, and IE11. Have tested the same webpage in chrome and firefox, and its working without any issues.
I have tried:
http://ieflicker.com/
tried removing the background, removing box shadows, text shadows, disable rounded corners and put everything at 100% opacity, but it still happens.
When the page is small, that is, there are less number of elements on the page, like the about us page of softpaz(link on top top right) then everything display fine.
Am confused on what to do now!?
I figured it out! Posting it if someone is facing the same problem. My system has the Intel HD3000 and running on Windows 10, which means that there was limited hardware acceleration support(as there are no official drivers from Intel). The page runs fine on other systems.
Once again, I see that Firefox, Chrome, Opera, etc outshine IE/Edge on the same system!

Safari and mobile Safari randomly missing images BUG?

Im trying to figure out why we randomly misses images when looking on mobile safari and desktop safari. Google Chrome is always working for me.
Is this a bug or is there anything i can change to make it render all the images. It is totaly random and never had this problem before.
http://www.fantasticfrank.se/stockholm/till-salu

Google Chrome seems to "Squish" Images?

So I'm designing and build a website for school as part of a project, on this page there are 3 images which in Internet Explorer and Firefox seem perfectly fine but when in Google Chrome, When ever you re-size the browser they seem squashed. I tried Googling it to see if there was a bug but nothing has popped up?
Picture comparing Google Chrome with Internet Explorer : http://prntscr.com/22cr26
Live site (So you can see for yourself) : http://baileywhite.comule.com/penguin/Shop.html
You have width and height attributes on the img tag that are not the same ratio as the original image, and that is what is "squishing" the image.

HTML5 Background Video - Makes Other Content Pixelated / Grainy

I am trying to make a website with a video background using HTML5's video tag. I also tried using a jQuery plugin (http://plugins.jquery.com/project/videoBG). I got the video to load and work properly, but every time it makes other content appear grainy/pixelated. Is there anyway to place items on top of the video background and not have them appear grainy / pixelated?
You can see the pages I've created. The code is fairly simple, so I won't include it here.
With Video: http://createinform.com/test4.html
Without Video: http://createinform.com/test3.html
You'll notice that the logo and text look different from page to page, but they are using the save CSS rules. Thank you in advance!
Cheers,
Evan
This seems to be a known issue with Chrome. I tried the same two pages in Firefox (5.0), IE (9), and Opera (10), and I couldn't tell the difference in the rendering.
EDIT: I also tried the two pages in Safari (5.0.1/Windows), and the rendering looks even worse there. So, perhaps it's a webkit issue.
A part the Chrome bug, your logo image is bigger than it appears, and is scaled down via CSS.
Using a correctly sized image would remove any logo issue.
The text below renders fine in both version BTW (chrome 14.0.797.0 m)