IE8 Doesn't Zoom Content When Applying a CSS Zoom Value to a Div

IE8 doesn't zoom content when applying a CSS zoom value to a DIV

IE8 will not work even IE9 also

These Browser will work Perfectly

Internet Explorer 10
Mozilla Firefox
Google Chrome
Opera x
Safari (-webkit-)

Emulating css zoom in IE8 - any jQuery libraries, polyfill, anything?

It is not possible. Several people have tried but they all fail to work in IE8:

• Zoomooz
• JSImpress
• Zui53
• Presenter.js

These and many others have tried and failed to make a cross platform zooming library

How to detect page zoom level in all modern browsers?

Now it's an even bigger mess than it was when this question was first asked. From reading all the responses and blog posts I could find, here's a summary. I also set up this page to test all these methods of measuring the zoom level. [↑ broken link. Archived copy → here].

Edit (2011-12-12): I've added a project that can be cloned: https://github.com/tombigel/detect-zoom

• IE8: screen.deviceXDPI / screen.logicalXDPI (or, for the zoom level relative to default zoom, screen.systemXDPI / screen.logicalXDPI)
• IE7: var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth; (thanks to this example or this answer)
• FF3.5 ONLY: screen.width / media query screen width (see below) (takes advantage of the fact that screen.width uses device pixels but MQ width uses CSS pixels--thanks to Quirksmode widths)
• FF3.6: no known method
• FF4+: media queries binary search (see below)
• WebKit: https://www.chromestatus.com/feature/5737866978131968 (thanks to Teo in the comments)
• WebKit: measure the preferred size of a div with -webkit-text-size-adjust:none.
• WebKit: (broken since r72591) document.width / jQuery(document).width() (thanks to Dirk van Oosterbosch above). To get ratio in terms of device pixels (instead of relative to default zoom), multiply by window.devicePixelRatio.
• Old WebKit? (unverified): parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth (from this answer)
• Opera: document.documentElement.offsetWidth / width of a position:fixed; width:100% div. from here (Quirksmode's widths table says it's a bug; innerWidth should be CSS px). We use the position:fixed element to get the width of the viewport including the space where the scrollbars are; document.documentElement.clientWidth excludes this width. This is broken since sometime in 2011; I know no way to get the zoom level in Opera anymore.
• Other: Flash solution from Sebastian
• Unreliable: listen to mouse events and measure change in screenX / change in clientX

Here's a binary search for Firefox 4, since I don't know of any variable where it is exposed:

<style id=binarysearch></style>
<div id=dummyElement>Dummy element to test media queries.</div>
<script>
var mediaQueryMatches = function(property, r) {
  var style = document.getElementById('binarysearch');
  var dummyElement = document.getElementById('dummyElement');
  style.sheet.insertRule('@media (' + property + ':' + r +
                         ') {#dummyElement ' +
                         '{text-decoration: underline} }', 0);
  var matched = getComputedStyle(dummyElement, null).textDecoration
      == 'underline';
  style.sheet.deleteRule(0);
  return matched;
};
var mediaQueryBinarySearch = function(
    property, unit, a, b, maxIter, epsilon) {
  var mid = (a + b)/2;
  if (maxIter == 0 || b - a < epsilon) return mid;
  if (mediaQueryMatches(property, mid + unit)) {
    return mediaQueryBinarySearch(
        property, unit, mid, b, maxIter-1, epsilon);
  } else {
    return mediaQueryBinarySearch(
        property, unit, a, mid, maxIter-1, epsilon);
  }
};
var mozDevicePixelRatio = mediaQueryBinarySearch(
    'min--moz-device-pixel-ratio', '', a, b, maxIter, epsilon);
var ff35DevicePixelRatio = screen.width / mediaQueryBinarySearch(
    'min-device-width', 'px', 0, 6000, 25, .0001);
</script>

CSS issue with browser default zoom

Try to include viewport meta tag in the head of your document like:

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1">

complete styles for cross browser CSS zoom

These will be sufficient for cross browser...

Demo

Note: As @martin pointed out that this may not work as
intended, doesn't mean this fails, Chrome just makes it 2x larger
than other browsers, because it RESPECTS zoom property as well. So it makes it 2x larger...

zoom: 2; /* IE */
-moz-transform: scale(2); /* Firefox */
-moz-transform-origin: 0 0;
-o-transform: scale(2); /* Opera */
-o-transform-origin: 0 0;
-webkit-transform: scale(2); /* Safari And Chrome */
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0;  /* Standard Property */

HTML

<div class="zoom">BlahBlah</div>

CSS

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(2);
    -webkit-transform-origin: 0 0;
    transform: scale(2); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
}

Chrome, CSS - zoom sensitive layout

First of all, you're using a background-image, something I would have loved you to have mentioned.

1) So yah, as mentioned in the comments below your post, it's just rounding errors of the div, which crops the background-image.

2) I have no sources sadly, but in my experience, objects using text as a measurement are zoom-sensitive, pictures sometimes not zooming relative to everything else, and content with a predetermined 'set' size (such as textareas, radios buttons, etc).

3) Nothing is bullet proof, especially with something as ever-changing as the web that also behaves differently on different browsers. Hazards of the trade.

Why doesn't content wrap around floated image in IE7?

It's because when jQuery animates (your show/hide function uses "slow") it causes the animated elements to "gain layout" this is turn causes the text not to wrap : Reference

e.g. your pr_content div lands up something like this with inline styles (in IE7, it's different in IE8)

<div style="filter: ; zoom: 1; display: block" class="pr_content">

There's various fixes but there's also various bugs, I tried a few different fixes like removing the filter but there's a also a bug with the removeAttr() function, I thought maybe removing the style attribute and using .css() to apply display:block or display: none; might work but no joy, though YMMV

Here's your existing jQuery: (from idccoupon/scripts.js)

$('.pr_content').hide();
$('.moreteaser').click(function() { 
     $('.pr_teaser').hide();
     $('.pr_content').toggle("slow");
     $(".pr_content").attr("zoom","");
  $('.moreteaser, .lessteaser').toggle();
});

$('.lessteaser').click(function() { 
     $('.pr_content').toggle("slow");
     $('.pr_teaser').show();
     $('.moreteaser, .lessteaser').toggle();

});

Note: the attr("zoom", ""); which I know is a recommended fix for this problem, is not working to remove the zoom property as far as I can tell.. which is what I found trying to remove other properties too.

I got it to half work (i.e. no enhancement for IE) by removing the "slow" command for IE only, just means they get an instant show/hide rather than "smooth" one.. this or just letting IE users get unwrapped content like they have just now may be the easiest solution?

anyway here's the code I used in case you want to try it:

$('.pr_content, .lessteaser').hide();

$('.moreteaser, .lessteaser').click (function() { 
    if (jQuery.browser.msie) {
         $('.pr_content, .prteaser, .moreteaser, .lessteaser').toggle();
    } else {
         $('.pr_content, .prteaser, .moreteaser, .lessteaser').toggle("slow");
    }   
});

submit input doesn't get the :active state in IE8 when I click on the button’s text

you can achieve this by applying input:focus to your input:active selector declaration:

input:active,input:focus{background-color:#000}

applying :active and :focus together are great for ui/ux/etc.... a lot of things.

---

Related Topics