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.
Related
Steps to reproduce:
Go to this demo
Open dev tools on Chrome (ensure you are at least on 108 or above)
Toggle the device tool bar
Select any mobile device
Select the body element in dev tools
Witness the fact that there is a lot of extra space after the body.
The same result cannot be reproduced by resizing the browser window, you must use either the device tool bar or a real mobile device.
I have tried Chrome on Linux, Mac, and Android, all face this issue. Firefox on Linux, Mac and Android do not face this issue. Safari on iOS and Mac do not face this issue. So it really is just Chrome.
I'm a bit confused on why this could be happening and how I might be able to fix it.
I have tried playing with overflow settings on the body tag. I have also tried playing with width and height fit-content. Neither have solved this issue for me. Maybe this is a bug with the svh and svw units I am using?
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.
I am having a strange problem with an app developed using Foundation Framework.
It seems that there are huge rendering problems, especially during/after scrolling. It may happen that images do not scroll together with the rest of the elements, but they remain static (as if they had fixed position with z-index -1), therefore messing with the other elements.
The issue happens only with Chrome for Windows (tested versions from 35 to 41). While on the latest Chrome (42), released yesterday, the issue is not happening.
It doesn't seem to be a known issue, but I have checked my code and everything looks perfectly fine. After all it works in every other browser perfectly, EVEN ON CHROME FOR MAC!
This is a screenshot of how the application should look.
Here are some of the rendering problem happening on Chrome for Windows after/during scrolling the page: Here, here
Any help on where this might come from, is appreciated. Thanks
Removing the height 100% from 'html' and 'body' solved the problem.
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!