I've encountered a weird CSS quirk where the layout misbehaves on the first load of a web page, but it works after you refresh. This behavior is only observed in Chrome.
To reproduce:
Open https://coinchat.org/j:offtopic
See that the right sidebar is pushed underneath the page, even through there is enough spacing and it is set to float: right
Refresh the page
Observe that the right sidebar is no longer pushed underneath the page.
Open a new tab, open https://coinchat.org/j:offtopic
Go to 2
The following code fixes this:
$("#chatsidebar").hide();
setTimeout(function(){
$("#chatsidebar").show();
}, 1);
My question is, why?
Related
Over the last couple of weeks or so Chrome seems to have had an update that is making the page resume scrolled down in the middle. Moving between list and form pages on out site it resuming in the middle of the page.
Even basic form pages when you click save it is leaving the page at the bottom so you don't see the standard bootstrap record saved confirmation message at the top.
This is making Chrome unusable for our product demos etc. and causing a massive headache.
I have tried going in to chrome://flags/ and 'Scroll Anchor Serialization' off but had no affect.
I have also tried adding overflow-anchor: none; to the body tag but also didn't help.
Is there any other way of being able to disable Chromes auto scroll resuming on pages so that all pages load at the top of the page. It only seems to be Chrome and only seems to have started happening in the last couple of weeks. We are now getting to the point that Chrome is not usable as a browser on our site when it used to be the most reliable for demos.
In the end we have had to add:
<script type="text/javascript">
window.scrollTo(0, 0);
</script>
To every page which isn't the best solution but it works.
We have just encountered a Chrome (65.0.3325.181) and Opera (52.0.2871.37) scrolling bug. This is on an intranet page so I can't give you a URL. But if the following symptoms are familiar to you, and you know the specific cause and a fix, please advise.
The scrollbar appears, and about 9 of 50 items can be scrolled vertically into view, at which point scrolling stops. It's as if the page believes there are no more items to be displayed.
However, if a new tab is opened and the URL from the broken page is pasted into its address bar, so that the page is retrieved from cache, scrolling works perfectly in the new tab.
So I'm building a rendering system for my app that pulls objects from a collection and runs em through js templates to create more children while the page is being scrolled. Essentially it detects when the bottom of the container is reached and removes the top row of rendered elements and appends a row of templated objects to the bottom of the container, and likewise but reverse for scrolling to the top.
The functionality itself isnt an issue. I've got it working 100% in chrome, but the issue starts in other browsers. In chrome, its as if the container scrolls forever, but in safari/firefox when the scroll hits the bottom, the new rows are rendered, but the scroll stays at the bottom so it looks like the last row is constantly being replaced by the next row to render.
My question is how can I determine the differences of how the scroll is operating so I can figure out a solution?
So the difference that was happening was that chrome had a new feature they built in called scroll anchoring. They added it so new content being added to pages would not jerk the scroll around. It just so happened to be a missing piece of the rendering system i was building that wasn't missing only on chrome. I emulated what it was doing in my own code now it works right on all other browsers.
To anyone curious, chrome has a css control to that behavior called overflow-anchor: auto or none;
More info about "Scroll Anchoring"
i have a website with alot of popup windows and z-index going on.
Chrome version: 46.0.2490.80 m (never seen in other browser, but cannot omit it)
Everything works fine, but every 50th (not precisely, but very rarely when opening popup or coming back from alt-tab)
Behind all this: my website.
The red: the fullscreen overlay beneath my popup.
The lightGray: my popup window.
The darkgray: popup content.
So for some reason, the corner of my div is cut off. The problem is not connected to this particular popup, or this particular corner.
I have sometimes seen this following an alt-tab into chrome, but not enough to say that's the problem.
I have never seen anything like this, usually it works or breaks, this time its working breaked.
Any clues?
So, I'm having a strange issue in chrome (Version 33.0.1750.154) where, when the site is first opened, the navigation in my header gets pushed down and outside of the header for some reason. Upon refreshing the site, the navigation returns to where it should be and doesn't cause any issues. I've noticed that the positioning is messed up ONLY when you first open the site (for example, if I close the tab and reopen it a few times, it'll randomly happen but it won't ever happen if I refresh the site). It works exactly like it should in Firefox.
The site is live here: http://ayushman.us/
Similar problem in this question (navbar positioning bug in chrome) but the solution doesn't seem to be working for me. Any ideas?
Note: If you open the link and the header is aligned, close the tab and reopen at least three times (closing each time it works fine). For some reason, the third time is when it messes up for me.