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.
Related
I'm working on a small website and I'm writing a website almost from scratch. I'm using Bootstrap 4 and I'm modifying only basic CSS.
Whenever I open the Chrome Devtools, the website completely flips out and it looks like it keeps reloading. The entire website only loads from localhost, however, the network tab keeps showing repeating requests to the saem assets, over and over again. The second I quit Devtools, the entire behavior stops. I've tried installing a cache killer, tried incognito, but the problems keeps appearing.
I'm also using Octicons, and what I have noticed is that when I manage to get the Devtools to at least stay focussed at the right part, the <i class="oi oi-chevron-right"> node keeps flashing in purple, indicating there is a change to that node. I can't open it and even just clicking on it won't help, the entire CSS keeps shifting in the inspector bar and it seems like something is making rapid changes. It appears that Chrome re-applies styling changes that I made a few days back, such as locally modifying the margin of an element.
I was able to work on the website just fine a few days ago, but even moving back in commits won't keep the problem from happening. I am starting to think it is a bug with Chrome, but I can not confirm this in any way.
Is there anything that is known to break Chrome's Devtools, that might explain this behavior, or is there a way to clear the cache of the Chrome Devtools specifically?
The "Changes" tab in Devtools reports that there are no changes, but the CSS I see on page makes me seriously doubt it. Removing the icons entirely does not seem to resolve the problem, so I think the issue lies elsewhere. Breakpoints are not triggered either.
I'm not sure but,
Have you checked the chromium extension program?
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.
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?
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?
I've been racking my brain over this for the past few days and haven't been able to find a fix yet. I'm working on a website for a client and it displays fine in Chrome and FF, but IE9 renders it unusable. The navigation bar (everything to the right of the logo) is pushed down. If I open IE's developer tools, every element receives an "Text - Empty Text Node" message and some of my HTML elements appear to be duplicated with no content inside of them.
WEBSITE REMOVED - PROBLEM SOLVED.
I'm at a loss on this one, as I've tried several fixes including removing white-space. Anyone have any ideas?