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.
Related
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
I have an application where we have few absolutely positioned divs.
The issue is, some customers using OSX Sierra are unable to see certain parts of the app and it seems that those parts are hidden behind the absolutely positioned DIVs. The Wierd part is that as soon as developer console is opened, everything works fine. But the moment, developer console is closed, it again starts acting crazy so there's no better way to debug this feature.
I tested this on 5 different client's machine remotely on Chrome, Safari & Firefox and the same issue occurs.
Not sure how can an OS affect a web application.
The only common thing I've noticed is that all the customers complaining about this issue are using OSx Sierra.
Is there a known issue?
My best guess is that it is not about the clients software.
Try to add position:relative;width:100%; to a div around your absolute divs. Then the maximum width of your absolute divs should be the clients browser width, unless your width is set in pixels.
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.
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!
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.