I used https://github.com/browserstate/history.js in a recent project to manage state changes in an ajax rich website.
Chrome exhibits a very annoying behaviour at times where it decides to reposition the scrollbar to some arbitrary position after a state change event. I have not experienced this problem with any other browser.
Does anyone have any suggestions? I would post code, but am not sure which parts will be relevant and I am hoping there is an obvious solution to this problem.
There are some obvious workarounds. Scroll to the top if that's what you want, or add a field to data object to store scroll position and restore it yourself. If it's a Chrome bug, work around it; if it's a feature you don't like, work around it; and if it's something you just have to implement yourself with three lines of code, work around it.
Related
I have implemented a design for my website using scroll snapping via scroll-snap-align documented here and scroll-snap-type documented here.
The implementation works, however on Google Chrome the user must scroll quite "firmly" in order to move to the next section. On the other hand only one "tick" of the scroll wheel is required to move to the next section on Firefox. The behaviour on Firefox is much more desirable whereas the Chrome behaviour feels clunky and unnatural.
I'm wondering if there is a way to adjust the scroll sensitivity on Chrome or something along those lines in order to achieve the same behaviour that is present in Firefox.
I have created a JSFiddle with a minimal implementation that demonstrates the different behaviour across the aforementioned browsers.
Thanks in advance.
EDIT: The behaviour in the JSFiddle (and indeed on my website) has now changed to something different but equally unsatisfactory. Now scrolling down one "notch" on the mousewheel causes the scroll snap to go 2 sections down instead of 1, I have created a new JSFiddle with a 4th section to confirm that the scrolling goes down 2 sections and not straight to the final section. I have been unable to find a reference to the update or change in specification that caused this.
I ran into the same issue described above and so I turned to https://lucafalasco.github.io/scroll-snap/. I've personally tested it on Chrome and Firefox and it seems to work well - that is to say, scrolling with the mouse wheel does not skip sections. I'm not intending to support IE11 so this serves my purpose.
On my website http://uus.diamedica.ee/et/tooted/veterinaaria/6 is having strange 1px graphical glitches in and around the red menu bar, that only occurs in MS edge. It's like small bits are bitten out of the menu ribbon, thus making it look uneven. I've tried changing fonts, backgrounds, margins, paddings, etc. And nothing seems to make it go away. I've tried different zoom levels, but still the same after refresh.
Funny thing is, if you hover the menu items, then some of the bugs go away. Is anyone else having similar problems in MS edge and knows what´s causing it? Image below.
additional screens
http://design.imago.ee/test/diamedica/screen1.png
http://design.imago.ee/test/diamedica/screen2.png
Somehow i was able to fix the problem (at least in the computer that it appeared in the first place) by giving .menu-ribbon position relative, z-index 2000 and bottom value -1px. The issue should be still available to see in the draft version for those who are interested, http://design.imago.ee/Diamedica/html/index3.html is the url, open it up and hit refresh once after you´ve first loaded the page. At least im still seeing it in the draft version.
I also try to make a test by normally visiting the site in Edge.
Site looks correctly without any issue.
Below is my testing result.
Let us know, If there is anything that we are missing.
We will again try to make a test to reproduce the issue.
Are you working with low memory or with so much load on Edge?
Try to close all other site and open your site and check whether you can produce the issue or not.
My website sometimes bugs, making it impossible to scroll the page using the mouse wheel, touchpad or finger. Dragging the scrollbar, pressing space or pressing page-up/down does work.
Any suggestions on what it could be, or how one would go about fixing such a bug?
There dosn't seem to be any specific action or page connected to the bug, it only happens about once every other day, and has happened on several devices, OS-es and browsers (even iPads and Android, IE11 and firefox).
Even hard-refreshing the page, or browsing to another page on the same domain dosn't fix the bug.
I've tried disabling Javascript in my browser, clearing all site data, scrolling with the touchpad instead of mouse, have checked the "html" and "body" elements for CSS rules that might block scrolling and even removed all html from the page and replaced it with mockup html.
I know the question is vague, with no example code, and I can't give an URL.
If anyone can point me in a direction, or have any tips, please help.
I do face the same situation, and what I do in such situations is:
Press the mouse wheel.
Move the cursor up and down on the page, still holding the wheel, till the page scrolls.
Let go of the mouse wheel.
You will now be able to scroll using the mouse wheel.
P.S: I'll edit this answer after some time with pictures and more explainations, till then, this should work.
As a quick intro, I'm not sure what the best way to phrase/tag/etc this question is, especially as it's so not really reproducible so I would appreciate any input from the stackoverflow community.
On a couple of different WordPress websites I help manage, I occasionally see HTML link elements overflow their normal inline position - the link text overlaps any text after it, almost like the link is absolutely positioned. However, the links are statically positioned and inline as normal.
The big problem with this is that it's not consistent and I've not been able to reproduce the problem. This makes debugging and tracking very difficult. I work mostly in Chrome on Windows 7/10 but I have had reports from clients seeing it in IE and occasionally in Firefox (all on Windows I believe).
In addition, when I have been able to use the Chrome developer tools to debug this, the problem resolves itself if the browser window is resized or if almost any link css properties are changed. It's as if the browser draws the page wrong the first time and when it's forced to redraw the elements, it does it right the second time.
Is anyone else seeing this problem? Does anyone have any ideas what would be causing this and why it would be so inconsistent?
I've not been able to get a screengrab of the issue happening as it's not possible to replicate but I may update this question if I manage to capture it happening any time soon.
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.