So I was using Chrome and IE together when all of a sudden Chrome decides to change its zoom level not only for the webpage, but the entire browser. I'm not sure if it happened when I restarted Chrome or if it happened when I decided to bring it to the front. So basically, all menu items, logos, icons, absolutely everything appears to have been zoomed in slightly. I have restored to original settings, disabled extensions (I don't use any extensions anyways), uninstalled and reinstalled, and nothing.
I've used the DPI settings in the properties of the Chrome application and nothing changes it. I've changed scaling in Windows and nothing helps.
Everything is larger in Chrome now and it's driving me crazy. Many menu items won't appear fully because of this. Note that this isn't just at the webpage level but at the entire browser level. I've included some images so you can compare. If you look at the youtube homepage, you'll see that everything is larger in Chrome than it is in Internet Explorer.
Scratch that apparently I need reputation in order to post pictures, ugh. If I can get 10 rep soon I'll post some pics.
I'm sorry if my description is rather vague but this isn't something I could search up. No other programs (including IE) are having this issue. THanks very much in advance if anyone can help. This is just driving me crazy.
No, Ctrl + 0 obviously does not work. This is an issue with the program as the entire program looks zoomed in. Everything, not just the webpage.
Found a "quick fix" solution from post #38 here:
Right click on the Chrome link on your desktop
Choose Properties and then add " /high-dpi-support=1 /force-device-scale-factor=1" to the existing Link to your path to chrome.exe.
Hope this works permanently. What a hassle.
If you're experiencing a "zoomed in" browser it's because you have an updated version of Chrome. Chrome and FireFox now adjusts the page zoom level according to your Windows settings to better support high DPI displays. For example, if Windows is set to 125% font size (120dpi), the content area will be zoomed by 25%. This is usually the default setting on your computer.
This means that your updated Chrome and/or FireFox browser will automatically set websites to 125%, and all other browsers remain at 100%.
What are possible solutions?
As of this writing, their isn't a known method of fixing this from a web coding standpoint, due to that it's created from the inner workings of the browser. That being said, their are still some things you can do from the "users" side to fix this:
The quickest way around this is to open up your browser and press on your keyboard "ctrl -" (control minus) twice. This will set your website content to 75%, which would be equivalent to 100% in all other browsers (but this will just fix the website content).
You can set your computers font-size settings in your control panel to "100%". This will make all of your computer fonts smaller.
I'm sure their is a better answer to this, but for now these are the 2 options that I'm seeing. In FireFox version 22 they also added this feature (as mentioned above), you can see the work around for FireFox here: https://support.mozilla.org/en-US/questions/962979
I'm sure a similar solution also exist with Chrome.
You can change your windows default zoom to 100% in display settings and make everything almost unreadable, or (a better way)
You can add a start parameter to your chrome shortcut:
"your-chrome-dir\chrome.exe" /high-dpi-support=1 /force-device-scale-factor=1
I know, it's too late, but just in case someone else has this problem...
Related
I am developing a static web app via React.js. I am using the google dev tool to inspect elements. In responsive design mode, everything is fine. However, when I select a specific mobile phone the footer element is not shown when I scroll to the bottom. However, it is visible on the console when ı inspect elements I can see the HTML info. I thought that maybe somehow I fixed the height for mobile devices or smt. Then I tried the firefox dev tool and I am able to see the footer. I have no idea which one is more realistic since I didn't deploy it yet. I deleted the history of browser before I tried.
More specifically; on the chrome dev tool when I select responsive design mode and change the resolution to 375x812 (same as iPhone X), I am able to see my footer. If I select iPhone x rather than responsive design mode, then I don't see it. It is more annoying that, both cases are okay for the firefox tool and I see my footer. So what is the problem ? Why two dev tools act so so differently for the same app and more importantly which one is true ?
Okay, I figured it out. There is a zoom option next to the width and height. It was 100% for my case, which should be "fit to window". I am leaving this dumb question here, it helps if any other beginner faces the same issue.
I cam across this problem when i started to design websites, they look zoomed in in chrome and edge, but it is okay in firefox.
The same websites looks perfect in my friends chrome browser. So, I must have some config settings inaccurate.
Here are some snapshots--
Look in Firefox--
Look in Chrome--
Look in Edge--
Here is another example--
Look in chrome--
Look in firefox--
here is my display settings--
I am nt able to fgure out how to fix this, Please guide me how to resolve this issue.
Link to my github repo-- Github repo link for calculator
I did not find path in while creating shorcuts as stated in one of the comments--
This comment by #Deepak-MSFT fixed the issue. Votes to him on this.
Try to create a Shortcut for MS Edge and Google Chrome browser. Right-click on it and click on Properties. Go to the Shortcut tab. In the Target, field add /high-dpi-support=1 /force-device-scale-factor=1 after the path. Separate path and parameter with single space. Click on Apply and Close. Launch the browser from the shortcut and see whether it fix this issue or not.
The value of the field should be something like:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-frame-rate-limit /high-dpi-support=1 /force-device-scale-factor=1
Also work if Chrome is launched from the "Run dialog" as:
chrome /high-dpi-support=1 /force-device-scale-factor=1
Had the same problem as you with default font size difference between Chrome and Firefox browsers and it is beacause I increased the font size in Windows 10, looks like Chrome interprets this like a general zoom increase because even the browser look is bigger now, not only the text as I intended.
Seems like a bug on Chrome side, as Firefox behaves normal and increases only the text as set in Windows.
Check the Windows font size in Settings / Ease of access / Display / Make text bigger section - there's a slider there.
My current fix is to set the default general zoom level in Chrome settings to 80%, which is a little smaller than Firefox but acceptable, probably 85% would have been perfect but I cannot set custom values.
Does anyone else have the problem that since yesterday in Chrome the dimensions of the browserwindow aren't shown anymore?
Could this come from an Chrome Update or is it a problem only of my browser?
I find this issue to. Because I use it every day it's critical for me. This may help you:
https://gist.github.com/mrpapercut/7a004210306b62dcf813
But I think it's just a f***up and they roll back it soon.
In version 48.0.2564.116 the dimensions are shown in the page only while I am actively resizing the window with the developer tools open -- they disappear after a short delay. Version 49.0.2623.87 (current as I post this) removes this tooltip.
You can force the dimensions to be visible at all times by turning on "Device Mode" (the iPhone-looking button second from the left in the developer toolbar.)
For some reason, black boxes are displaying in random spaces in Chrome (latest build).
Some of these boxes are appearing outside of the main container, whereas some are appearing inline, covering content blocks. They appear randomly, usually after scrolling, and will often disappear when opening the inspector, hovering over elements, or scrolling down and back up.
For reference, there are some animations, box-shadows (which have been disabled with no luck), linear gradients, and position: fixed elements on the page, although this is not an issue with browsers other than Chrome.
This has been widely reported in user testing, although I have not been able to conjure up a fix. I am not sure if it is a CPU or graphics card issue, as the site is relatively lightweight and I am browsing with a new laptop with 16gb ram. My old Mac Mini, with 4gb of ram, does not produce this issue.
Any pointers would be most appreciated.
Update: This was a bug in Chrome and was fixed: https://code.google.com/p/chromium/issues/detail?id=142038
eddz filed the issue at crbug.com/new and over 40 people starred the ticket to follow along. It led to a few separate fixes in Chrome by the engineering team.
I had this issue with a website that was using transformZ (0) to force GPU rendering. When I removed this style the issue disappeared
This isn't an answer, but if you are able to somehow reproduce it maybe later on down the road:
Make a copy of the page locally, or anywhere, set the base href to the main domain, now start removing css links and js scripts from the bottom to the top until you don't experience the behaviour anymore, if you get to that point then the last script/stylesheet you removed is the culprit.
If you find the culprit file, now try finding the culprit line/section.
If you don't get to that point, it may be the browser, but it doesn't sound like it is.
It may also be linked between scripts/stylesheets and/or accidentally inherited.
We had experienced this weird blocks too on our website. In past we was using transitions, transitions was reproducing another bug "weird lines" randomly appeared on page and dissapear during scroll.
Now we start using transformX-Y, may be in some places Z too. And we have got this hell bloack blocks.
It seems something wrong in Chrome with transfom + transition animations. May be this bug appear when too much blocks animated at one time?
FF works fine.
I encountered these same boxes. For me, the problem was that I was using mp4 videos, which are deprecated in chrome, instead of webm videos.
I think is related to the GPU I had the same issue on my website. And it stopped happening when I turned on the Metal Rendering flag.
My website renders back bgs randomly while scrolling. It is really heavy on videos and animations and looks like chrome has so little GPU available that graphic intensive website doesn't work correctly on blink. I noticed that when chrome used webkit those issues didn't happen.
I this is a blink render issue.
I am building a new site, and I have a folder on desktop with everything in it. For testing basically I open the index page in a browser and preview that way while building it. It looked correct in firefox, safari, chrome and opera on my mac. I uploaded that file to the server, and now firefox on mac displays everything much smaller. Like all size decreased by 200px in width and fonts got small too. The other mac browser show it fine.
I had 4 style sheets at first, a main one then separate ones for other pieces, I combined all into one still no change. Initially I reset font to 100% and then set a base font of 62.5% and adjusted sizes with em's. Someone said that could be culprit so I tried changing to pixel values. No change.
Any idea what I can check why it only changes in one?
Thank you.
Is it possible that you just changed the zoom on the browser?
Reset it in view->zoom->reset
The web version could be cached. Try deleting it!
Make sure that the off-line local copy is still in the same condition as you left it. Then delete all the uploaded files from your webserver, and replace them with the desktop files.
There's a chance that, as Fiarr suggested, your browser is doing something weird with the cache, so ctrl+F5 to deal with that. Goog's suggestion of the zoom being different for your online site is probably the best, but, just to be sure, use Firebug to see what's happening and where the crazy-styling is coming from.
Failing that, you might consider posting a link to your site so that we can see what's actually happening, rather than guessing.