My code is open source and that particular branch is currently deployed so you can see what is happening if you have an iPhone.
I've captured what is happening to show the problem.
This is only a problem on iOS, I am testing this with my iPhone SE, but I imagine newer iPhones will have the same issue.
On Android, this problem does not exist. It looks fine on Android!
The search input should be at the top, ready to receive input from the user.
How can I make it behave the same on iOS? I have already tried:
Giving position: fixed to the body.
I already tried window.scrollTo(0, 0); here.
UPDATE
I've created a little HTML/CSS file as a playgournd specifically for finding a fix. It is deployed here.
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
First off, after doing some research I am aware of previous issues relating to input fields causing issues on iOS. However, apparently this was fixed in iOS update 11.3. The device I am using for testing is an iPhone 5s running iOS 11.4.1.
I have created an html document (includes css and JS) and it is stored on the Google Cloud Platform here. If you open this link on either an Android or iPhone, everything displays and works as intended.
I am using AppPresser to create a mobile app. A page of the app loads the Google Cloud link and displays it with no issues. AppPresser provides a previewer app that can be installed on a device for testing the current app build. On an Android device, the html page still works perfectly as intended, but there are issues when testing on an iPhone. Here are some screenshots:
If the "Purchasing Price" input is focussed while at the bottom of the screen, it moves to the top as space is made for the keyboard.
Before:
After:
However, if the "Purchasing Price" input field is near the top of the screen and it is focused, everything seems to go haywire. The container vanishes and a previous container is shown. The user cannot see what data they are entering.
Before:
After:
I find this issue to be very strange, especially as the html page works perfectly on an iPhone when opened directly through the browser. Any feedback would be much appreciated.
Thanks
I thought I had tried all the fixes provided online, but adding the following css:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
from this article, did the trick! I am still confused by two things that maybe someone can clear up for me.
Why did this issue only happen when previewing my app build, and not when loading the html file directly through the iPhone's browser (file is hosted on the Google Cloud Platform).
Why did I have to implement a fix for this, when apparently the input issues were addressed in iOS update 11.3
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 have posted this on the sencha forums as a bug, but I figured getting it out on stack overflow could be advantageous:
http://www.sencha.com/forum/showthread.php?257622-Serious-layout-Issue-with-ExtJs-4.1-and-Chrome-25&p=943170#post943170
and a screenshot of it in action can be seen here:
http://www.sencha.com/forum/showthread.php?257508-Strange-behaviors-in-Chrome-25-with-Ext-4.1
Basically, with ExtJs 4.1, after upgrading to Chrome 25, our users are sporadically seeing layout failure in our application.
It usually is noticed by the window 'close' button appearing skewed on the left of a window instead of the right, and all the form fields displayed vertically. Once it happens, every subsequent component that is rendered is all messed up.
Reverting to chrome 24, or using Firefox makes the problem dissipate.
The issue shows up in IE when running Chrome Frame 25.
We have disabled our custom CSS, and still seen the issue.
Any ideas?
Amphro's answer does address the issue, but doesn't completely eradicate it.
The only real solution I have found is to upgrade to ExtJs 4.2.
I can still replicate the issue with ExtJs 4.1.2 in Chrome 26 as well.
We were experiencing a similar issue with our Ext application. We finally narrowed it down to floating numbers in the height and width of panels. For example, if you have any code that looks like panel.setWidth(v1 / v2), change it to panel.setWidth(Math.round(v1 / v2)). Hope that helps.