I recently noticed over the past few weeks that Google Chrome appears to be adding a CSS class (and style block) to all of my pages and applications that run in Chrome that has to do with scaling the page.
It can result is some rather nasty looking changes, especially for pages that are meant to be displayed at 100% width. (It leaves unnecessary whitespace at both the right hand and bottom areas where scrollbars traditionally appear)
I attempted to remedy the problem by creating a simple jQuery function that would set the scaling to 1 (to keep things how they were previously), which worked, but I am looking for any other ideas that might be a bit cleaner.
Added Class:
<html class='cssClass'>
Added Style Block:
<style type="text/css">
.cssClass { -webkit-transform: scale(0.990625);
-webkit-transform-origin: 0 0; }
</style>
Current Solution:
if($.browser.webkit){
setTimeout(function (){
$('html').removeClass('cssClass').css('-webkit-transform', 'scale(1)');
}, 1);
}
This fixes the problem – however, I just thought I would see if anyone else has encountered any other issues with this (or has any other hopefully more elegant fixes).
Update: This was being caused by an extension. I’ll leave the question up in case anyone else feels like they have wandered into some alien world like I did.
Go to Tools -> Settings -> Extensions and then disable all your extensions and it will stop. Then you can enable them one at a time to figure out which one is actually doing that.