I'm running Ubuntu (12.04.1 LTS) using VirtualBox (4.1.14) on a Windows 7 host machine. It seems that, using Chrome (21.0.1180.89), CSS transformations are causing the browser to lock up in a strange fashion.
This can be tested using this page: http://benmurden.com/css3test/css3test.html
In short, it looks like the "content area" of the browser, that is, anything apart from the URL bar, tab list etc. stops rendering during or after a CSS transformation and becomes "stuck" on top of every other open process. I can still close the offending tab or the browser itself since that area of the browser is fully responsive. I can even switch to another process and it will be partially visible under the "stuck" content area on top of it.
I meant to take a screen cap to demonstrate this particular effect but after locking up Chrome in this way and switching to a text editor behind it, only the text editor was fully visible on the screen cap and the locked-up Chrome was nowhere to be seen. This leads me to believe this might be a problem with VirtualBox rather than Chrome itself. Then again, there is someone sitting next to me with a nearly identical setup: Same type of machine running Chrome on Ubuntu using VirtualBox with identical versions of those three and he does not experience this issue.
I am unable to reproduce this on any other browser and host/guest combination I'm currently using. Those are:
Firefox (15.0.1) on Ubuntu
Firefox (15.0.1) on Windows 7
Chrome (21.0.1180.89) on Windows 7
Please let me know if there's any other information I could supply that would be of use.
Thanks!
Related
I have discovered that iOS 15.1 iPhone 7 Safari cuts of webpage content during reloads(not related to the flexible viewport height). If the user would have a bad connection or the server is slow, the slow reload could lead the user to start scrolling down/up the current page, and see a broken design/cut off page.
Has anyone else seen this bug on another device? Does anyone know of a trick to prevent the cutoff?
How to reproduce:
I am using a node dev server and a simple html file(no styling) to see the bug. First start the server, then load the page on your phone. If you then cut the server and try to reload on the phone, you should see the bug. Make sure the html file is long enough!
I recognized this Bug on several Pages occurring in Chromium related browsers. I opened up a Chromium Issue, where the project members could not reproduce the problem - I am trying to figure out why this is happening (since the Problem occurs on Pages as like google.com, amazon.com, and so on, on several Mac-OS devices, which have nothing else in common) - we tried it on a clean Chrome installation, where The Problem is also occurring. To me it seems to be a bug - now I'd like to know if other people are also not able to reproduce. If you can reproduce (to reproduce read the following lines below) and/or find something new/interesting about the problem consider supporting the Ticket/Chromium Issue.
Chrome Version
91.0.4472.101 (Offizieller Build) (x86_64)
URLs tested
https://www.google.de/
https://www.microsoft.com/de-de
https://www.amazon.de/
Other browsers tested
Safari: hasn't the problem
Firefox: hasn't the problem
Edge: has the same issue (also Chromium based)
Chrome Canary: has the same issue (also Chromium based)
How to reproduce the problem?
Refresh Page (Command+Shift+R) and Scroll upwards while page is loading or in parallel (you have to be quick to reproduce).
What is the expected result?
Expectedly the Page should not over-scroll and stop at the pages top/end instead the page can be scrolled infinite above the pages top, same issue appears by scrolling down, where scrolling should stop at the bottom of the page.
What happens instead?
Browser keeps scrolling above the pages top/bottom infinitively. Once triggered the infinite scrolling wont disappear, even after refreshing the page - the only way to change the behavior is to copy the url and paste it within a new tab.
Small update: it seems like the problem appears when using a logitech mx master mouse (if you run into the problem when not using this specific model, let the chrome people know) - it looks like it can be solved by following steps:
Open a terminal window.
Type in the following command then hit enter:
defaults write -g NSScrollViewRubberbanding -bool false
Source: https://www.computerworld.com/article/2726533/turn-off-elastic-scrolling-in-os-x.html
Hopefully they'll fix the problem in chrome itself, until then this should solve the problem.
Update: See Irgend Son Hansel answer
I don't think there's an official fix currently, but what I do when this bug comes up is to simply click the scroll bar. It usually fixes it for a while before it comes back up again.
I am not entirely sure what the OP is asking but I assume they are looking for a fix or a workaround for this?
I occasionally experience the same on my MacOS machine. For me, refreshing page does not work. What I do is the following:
copy url of the current page
open new tab and navigate to the same url
close old tab
A couple of weeks ago, I looked at a web app I created on a different machine (Chrome on Ubuntu) for the first time, and looked in horror at the scrollbars that were appearing in all of my overflow containers. I made a mental note to fix it later, but since I couldn't see the issue when looking at the site on my usual machine, I quickly forgot. I was just looking at it on another machine that I use on occasion (Chrome on Mac), and the scrollbar chaos has returned. However, when viewing my web app on the machine I'm on right now, the scroll bars are behaving as expected. Below are images to demonstrate.
The first is a screenshot from my current machine, of a chat box with overflow: scroll:
Same chat box, same code, same browser, but on my other Mac:
Look at those ugly things. It's like my browser went back in time 10 years. Both machines have the same version of Chrome (58.0.3029.110 (64-bit)) but differing versions of Apple OS (working one is Sierra 10.12.4, the non-working one is El Capitan 10.11.5). Again, this scrollbar behavior was seen on an Ubuntu machine too. Note that scrollbars work as expected in Firefox on both machines.
EDIT
To demonstrate what is expected, here is an image of the vertical scrollbar that appears only when scrolling on the working machine:
Try using overflow:auto; instead of overflow:scroll;. It will fix the issue as it'll show or hide the scrollbar automatically based on content inside the parent!
I came across this post with a similar issue, and thought I'd mention that the difference between the two could be explained if you are using a mouse on your "other Mac", but not on the original machine.
But as stated elsewhere, overflow:auto; would be a solution.
The website I'm developing suddenly stopped working properly. The images on my Homepage appear sliced and in weird places (however when inspecting source and hovering over certain elements, the highlighted content seems to be in the right place), some hover on effects don't work and some text doesn't render.
Everything works properly in all other browsers except for Google Chrome. I cannot think of any other thing I've updated in the source code than executing svginjection plugin.
I uploaded my backed up files that used to work before, but the problem still occurs. It doesn't show up on every single computer, just on some (and I've checked it on multiple machines, both - Mac and Windows).
Just to clarify, I did clear the cache, I did check in the Incognito mode, I did restart my computer. None of these helped. I'm also 80% sure that problem only occurs on computers, on which this website was previously opened (the pattern I noticed after making around 10 tests at work).
Thanks for any help
Aight, so after going through all my files, trying to disable multiple options, etc... Everything is fixed now. If you do have similar problem, go through your css files and disable all webkit powered transforms and transitions, cause apparently enough is enough and if you have too many, Chrome just won't handle it. I managed to still reuse some of them, so... Must have caused some glitch in the matrix and that's why it all got messed up. For weirdly positioned images check z-index of parent container.
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...