how to show images with it's original smoothness in IE - javascript

i just disappoint with IE. how ever for image quality and better image view. Is there some thing css tricks for especially with IE that can show better Image appearance.
here is Image appearance of my screen in chrome :
here is Image appearance of my screen in IE :
i just want to know is that IE problem or there is my image problem or there is any way to fix this issue with css tricks.
please help me...

this is known IE issue you may try with
img.imageclassname {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
}
possible duplicate of IE shows black border around PNG when faded in
try with this one!

Just by what i have seen in the screenshots, I think the IE version is old or the browser is new but is rendering in an older standard (IE7 standards mode). Using F12 find out what mode IE is opening it. If it is opening it in an older mode, force browser to open in the latest mode by using the meta tag..
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
hopefully this helps.

Related

Scale background image to fit ie8 window

I'm using a drupal 7 module to load in a background image but IE8 doesn't support css3 resizing.
background-image: url('image.jpg');
background-size: cover;
I can't easily load in the image using the usual methods such as putting it in a DIV or using the ms-filter alphaimageloader to load it.
A javascript solution is fine if this can't be done with just CSS that ie8 supports. (Something that also works for ie7 would be fantastic too, but ie8 is the priority).
Add Full Size Background Image to Internet Explorer 8, and IE7
Since you can't easily place the background in your site using the usual methods, can you place an image within your code? If so, this solution might work. I used it to simulate a full-screen background for IE8 and IE7, and it works well.
Place the image right after the body tag in the html code. (You can probably place it elsewhere depending on your site structure, but you may have to add a z-index.) Next, the background in this example is wrapped in an IE Conditional Comment so only IE8 and below will see it. (Note: It's buggy in IE6, but you might be able to get it to work? If not, just adjust the Conditional Comment to include IE7 and IE8 only).
HTML Code
<!DOCTYPE html>
<head></head>
<body>
<!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->
CSS
.ie87-bg {
display:block;
position:fixed;
top:0;
left:0;
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
margin:0;
padding:0;
}
You probably already know this, but here are 3 ways to target older versions of IE:
JavaScript browser feature detection - mattstow.com/layout-engine.html
Css Hacks - BrowserHacks.com
IE Condtional Comments http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Helpful Tips: background-image:none; overwrites background-size: cover. The _ hack is one way to turn off the custom IE background in IE6 .ie87-bg {_display: none;}.
position:fixed; is buggy in mobile/touch screens. The default position:scroll; works well on touch. The background idea is from this tutorial - http://css-tricks.com/perfect-full-page-background-image/
This works for me to stretch image on full window in IE8
http://css-tricks.com/perfect-full-page-background-image/

iOS-like semi-opaque modal which blurs the background behind it

I'd like to revisit this similar question from 2012. I wonder if anything has changed from the time that particular question was posted?
Is it possible to create a modal which doesn't require a canvas rendering of the page, which is then displayed and cropped to the desired size?
If so, is there a way to display this cross-browser?
I see that #Michael Wasser mentioned "-webkit-filter" in a previous question. That's how you would do it these days without relying on Javascript.
img {
-webkit-filter: blur(10px);
}
See this HTML5Rocks article for more on this.
How supported is it?
caniuse.com says that global support is at 43.67% at the moment. All the recent Chrome, WebKit (Safari), and Opera (now that it switched to Blink) should have them. Not sure what the plans are for Mozilla and Microsoft.
In Firefox, you can probably use SVG filters to recreate the blur.

Chrome Media Query w/ Scrollbars Change

Chrome used to improperly exclude the scroll bar in its media queries. This means that with 1000px of visible space and a 17px scroll bar, other browsers would report 1017px as a width so far as Media Query is concerned, but webkit browsers (such as Chrome and Safari) did not do this.
These browsers could hit a specific size where a scroll bar would appear in one resolution, then change resolutions to another where it would appear, then it would go back to when it didn't... the solution caused an ugly blank space to appear where the scroll bar should, but it did not. It came out looking like a glitch, and the DOM resize events did not fire properly so it was not something you could react to properly in JS.
However, now in Chrome 29, this appears to have changed. Now they are going off of how the specification works and including the scroll bar in their media query calculations... just like Firefox and Internet Explorer (and how the specification says they should have all along). This fixes the bugs, but causes another problem in that the JS to try to detect the Chrome/Safari issue now will have false positives, because it is not a concern with newer versions of Chrome and I assume eventually Opera and Safari as well.
In light of all of this, I cannot find any information anywhere on when this was fixed in either Chrome or Webkit. I hate having to resort to browser version testing in my JS to work around these flaws, but I am just guessing blindly on Chrome 29+ for the moment as a temporary patch and would love an authoritative answer... I have tested in Safari 6.0.5, but the old method is still being used...
Does anybody know in what version of Chrome and/or Webkit this was fixed?
Chrome is no longer using the webkit engine as of Chrome v. 28 it now uses the Blink Rendering Engine. So no need to be detecting this for chrome unless you need it for previous versions.
For more on Blink: Blink Documnetation
For more on the Release: Next Web Article on Webkit/Blink Switch

CSS pointer-events='none' and/or XUL mousethrough='always' in web pages for Firefox

Very recently I asked this question on how to pass clicks through an element (e.g. full screen overlaying ). Received some good advice, but I still wondered which browsers supported this natively...
For those skipping the previous link, the overlay is purely cosmetic, must be overlayed and should ignore clicks (all mouse events should pass right through it)...
So far, I've only managed to get this working with WebKit browsers.
Works (Chrome and Safari 4): -
<image src='./images/75/75.overlay.blood.png' width='100%' height='100%'
style='z-index: 3; position: absolute; top: 0; left: 0; pointer-events: none;' />
Firefox is known to support pointer-events with SVGs (and with other HTML elements in 3.6); problem is, I can't seem to get this to work with an SVG (e.g. xlink:href="overlay.24bit.8alpha.png").
Another way I hoped this could be achieved was by using XUL in HTML.
I'm hoping to use the attribute mousethrough="always" on the overlay (<image>, etc). Not working as of yet...
Oddly enough, Internet Explorer treats alpha opacity PNGs transparent areas as "click through" which is handy.
Any other good (or simple yet hackky) ways to achieve this in Firefox (3+). Pondered a Flash overlay with wmode="transparent" (fail).
Try this jQuery solution: http://jsbin.com/uhuto
Works in Firefox, Chrome, iPad's Safari, and IE8 at least. The only issue I saw was that the overlay wasn't translucent in IE, but I assume that's something that can be overcome.
Another solution (used by an Ext JS plugin): http://www.vinylfox.com/forwarding-mouse-events-through-layers/ - uses Javascript to reforward the events.

jQuery round corner code for IE8 in standards mode?

I need a solution for round corners using javascript with or without jQuery in IE8 standards mode.
This seems to work in ie8 :
try it...
Update 11-10-2010:
You can also try to include PIE.HTC and call that from your stylesheet. for more information see the CSS3PIE website. It is a much better solution!
jQuery corner() seems to work correctly in IE8 standards mode. Seems to be the go-to corner plugin for jQuery, too.
I've had good luck with dd_roundies. It doesn't use jQuery and it's a pretty small script.
Example usage from the site:
<script src="DD_roundies.js"></script>
<script>
/* EXAMPLES */
/* IE only */
DD_roundies.addRule('.roundify', '10px');
/* varying radii, IE only */
DD_roundies.addRule('.something_else', '10px 4px');
/* all browsers */
DD_roundies.addRule('.yet_another', '5px', true);
</script>
Here is an htc file which works and is very popular.
Curved Corner Border Radius Cross Browser with HTC file
A file with the HTC file extension is a HTML Component file.

Categories