Before Chrome 49 the page size was indicated on the top right of the page when we opened DevTools, and showing real time size when we resized the window. It was very practical for responsive design.
But since Chome 49 it seems to have gone.
Now I'm wondering if it was an extension that I've added a long time ago that is not working anymore, or was it a Chrome thing?
If it's a Chrome tool how can I put it back, as I don't see the option in the options.
Page Ruler is not as practical as we need to focus on an element and can't really see the real time width/height.
I've found my answer while digging in Google.
It's a bug and will be fixed on Chrome50 https://bugs.chromium.org/p/chromium/issues/detail?id=582421
I guess I will have to use Canary! (It works on Canary)
Related
Our application has been using Chrome without a problem for years. In the last three weeks, at least in Chrome 85, we have had numerous reports of full width bands at the top, bottom or in the middle of the screen disappearing when a long web page is scrolled quickly. These bands are permanent until the mouse is moved when part of all of the missing page gradually reappears, mostly in the area of the cursor. This is very frustrating for our users, I can see no similar reports from other Chrome users but this must be a browser issue. I have attached two screenshots of the problem which we can easily recreate. Any help appreciated.
Screenshot showing missing band mid way in long page
Screenshot showing partial repaint which continues as mouse is moved
I have used Chrome Canary to test this issue in V87 and it now seems to be fixed. It also seems to be fixed in the latest Chromium based Edge version.
I'm using Chrome developer tools for version 49.0.2623.110 m and I notice that the little box displaying the window WIDTHxHEIGHT when you resize is now gone or moved. Am I just not seeing it? Is it moved?
I use Viewport Resizer now but I really missed having both options to check window size...
I was looking for answers to this problem myself, and I found a couple of pages. Apparently, it's a bug in Chrome v49, that should be fixed in Chrome 50. Here are a couple of links to the discussions:
https://productforums.google.com/forum/#!topic/chrome/LhOfBFSBdx8
https://bugs.chromium.org/p/chromium/issues/detail?id=582421
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.)
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...
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.