I am creating a web site where end users can upload a photo and have it superimpose under a calendar as a gift
All works perfectly in Chrome or FF, however in IE I have an issue with scaling the image, it only scales in the x axis meaning it squishes the image rather than makes the whole image bigger or smaller.
When you click on the plus or minus sign to scale the image, I am changing the inline width style for the canvas element.
I have tested it on IE 9 and 10, any ideas whatis going on?
Here is the link - http://www.submitphoto.com.au/new/diary.php
Related
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!
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.
in my site I have problem in proper rendering of icons in Google Chrome as shown.
As you can see the right and bottom edge of image seems to be cut-off. But the same icons renders properly in all other browser including IE, FF, Safari.
Following is the screenshot of mozilla for the same.
Actually icons are of very big size around almost 1000 X 1000px, and I'm showing that in 100 X 100px area. The problem is I can't scale down the images and I have to use these images only.
In chrome when I zoom-in or zoom-out my website, for a moment it renders correctly but again after some time is renders as shown above.
Any possible solution to this?
Thanks for your time!!
I have resolved it myself by using image-rendering css property.
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
I have a Joomla website and I observe a problem with some images.
In Chrome images look really good and sharp but in Firefox and IE the images are not that sharp and the colors are a bit strange.
Take a look at the photos below. The difference is more obvious on the Standings were the emblems of the teams are really small.
Any suggestions??
Image using Chrome
Image using Firefox
Website URL:
http://www.neasalamis.net
You're telling the browser to scale the image from 150 pixels to 60 pixels.
Most browsers aren't good at that.
You should create images that are exactly the right size using an image editor.
This will give you complete control over how the image is scaled (image editors do a much better job than Firefox), and make the files smaller too.