I have recently taken control of a large website. My problem is that sometimes, on some browsers/ computers, when you navigate between pages (or hit refresh) the entire content loads slightly to the right, then half a second later, jumps back to the left where it should be. The distance is only around 5mm, over the course of a second, but it is noticeable.
Things that are useful to know:
It is a wordpress site, but has only basic functions- The menu contains jQuery but there's little other javascript to prevent loading.
All content is wrapped within a container that is centred using
{margin: 0 auto;}
There are several CSS style sheets, and some major tags such as the container have been defined several times- i even found a discrepancy between the width between two of these, but when fixed everything still jumps.
There are no images on the side that are causing it to jump by being slow to load.
The content only jumps if the content is greater than the screen height- that is, it goes off screen.
Content will jump with my old computer, but will not jump with my new computer, on the same network and connection.
On an older computer content will jump with IE 10, but not when you put IE10 into compatibility mode.
I'm afraid that i don't have the permission to put a link to the website, so i've tried to put everything i know about it here. I know that makes it more difficult, but any pointers to put me in the right direction will help a lot!
Update!
The scroll bars were the problem- I used the answer from this thread: Making the main scrollbar always visible
and all jumping has stopped!
You should simplify the problem removing 'things' until you isolate it.
If you don't have a preproduction or development environment to test make a copy of the page where the problem still exists. Then start removing things. If any div needs some content so the layout is stable replace anything dynamic or complex with simple text or images.
If the problem seems fixed removing something don't think you got it, undo what you just did so it still fails and keep on removing parts or functions that definitely have nothing to do with the problem.
When you have a minimal example that is still failing it will be much easier to figure out what the problem is or if not post the example here so we can help.
Related
I am new to Web Development and React (and fairly amateur at CSS), so there must be some fundamental issue with my understanding of how flex works.
With reference to this codesandbox, the website that I am designing (for upskilling myself) seems to have (for the lack of a better word) some kind of 'shunt' in the Home Page. To elaborate, keep a close watch on the navbar on top. As soon as you click on 'About', the whole page seems to move a little to the right. Only the home page is being affected in this manner.
I have tried figuring out the issue on my own using the Browser's handy 'inspect tools'. Came to the following conclusions.
It seems that the Home page has the width of 1519px whereas all other pages have the size 1536px. I am unable to understand why there is a difference of 15px at all.
Trying to isolate the issue (by removing all elements and adding them back one-by-one to see which one is erroneous), I realised this 'shunt' is being caused whenever I place a flex element inside another flex element. Thanks to other stackoverflow answers, I found that the dimensions of a flex element depend upon the parent (which in turn is another flex element with ambiguous sizing properties).
Issue
Even when I resolve the above mentioned problem, there still remains the "latest-post-card" element which impacts the Home Page orientation. Further, when I remove the height property for the "latest-post-card" everything falls right into place, perfectly, just the way I want it to appear, save for the fact that the height of this card is variable. For the sake of consistency, I would like this card's height to be fixed (as I will keep updating the contents of this card dynamically through the backend).
Requesting fellow developers to shed light on the issue here; would appreciate if anyone can point out what the root of the problem is and how I can remedy it.
What you're referring to as a "shunt" is caused by the other pages taking up less height and therefore not needing the scrollbar. When the scrollbar disappears, the page basically expands by the width of the scrollbar and therefore the content jumps slightly to the right.
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
I came across a weird bug with jsfiddle. The layout I get when I visit the site is completely broken. This bug happened when I dragged the vertical resize bar while my second display disconnected. See this the result:
There is probably a way I can get this fixed from the inspector by resizing it manually, locating left panels and changing their width manually and than playing with the vertical resize bar; I'l keep investigating.
Where are the layout positions stored?
Before asking this question, I tried to reset my cookies, I had a look into local storage and session storage (they were both empty). I know it's a local issue because jsfiddle is too awesome to break like that, it's not because of the code in the fiddle, I opened the fiddle in private navigation and worked like a charm.
Edit: I fixed my issue by deleting .column.left, #handler_vertical appeared, I moved it and now data is fixed, but I still don't know where this is stored ;)
I had this same issue and worked out that it was after I reduced the size of my browser window, I'd accidentally moved the vertical bar left, which caused this to 'disappear', so when I resized the window to full, no vertical bar!
To fix, I searched the inspector element for 'handler_vertical', and around this were column left and column right, with widths set inline. Simply remove these inline widths and it's back to normal.
Strange that some js is still adding itself even after clearing cache and cookies!!
I accidentally deleted an HTML node in Chrome's inspector, which broke JSfiddle's layout.
When I reloaded the page, I was surprised to see the layout was still broken.
I cleared my cache and made a hard reload, but JSfiddle's layout was still broken!
The solution came out recently : I changed Chrome's theme... and it fixed JSfiddle.
Sometimes you just don't want to understand.
I know this was solved a while ago, but I just wanted to add that the FAQ acknoledges this and pasting Layout.setWindowSizes(null)into the browser console fixes the layout.
Source: http://doc.jsfiddle.net/faq.html
Same just happened to me, reloading the site had no effect but deleting last cached elements made it
The website I've been working on has this odd, and seemingly non-consistent issue, and it only appears to happen on Google Chrome.
My main content section will, occasionally, product vertical and horizontal scroll bars.
When I open the page as a file, the scroll bars pop up intermittently upon opening the page, and refreshing the page. They usually do not show up, but every couple of refreshes or so, they will pop up.
When I run the page locally using NGiNX, the scroll bars will pop up upon opening the page, but disappear when I refresh and no amount of refreshing will bring them back. If I click back and forth between two different test pages I have set up, the scroll bars stick around. Only upon hitting reload, do they disappear.
I have not seen the issue when I run it from my temp free webhosting site, Zymic. I was actually not even going to worry about it because it didn't show up when it was live, but when I noticed the issue popping up from my locally ran web server, I figured I should look into this.
I have no idea where to start looking for what may be causing the problem, but I'm providing a video that will clearly show the issue, and a link to my current live site. Based on reports of others and my own experiences, the issue will not show up from the live site, but it will give access to all of my current code (current-ish, I'm in the midst of trying some things out) and I will happily provide any specifically requested pieces of code. I would try and supply the bits right away that might be causing the problem, except that I have no idea :\ But if I narrow anything down, I will include that bit of the code along with what I've discovered.
Short 58 second video of the problem: http://youtu.be/K7tjGJ8hIV0
Live site (issue should not occur from this link): http://jrltest.zxq.net/
Thank you all very much!
This is caused by your overflow:auto; style on your #maincontent div. Just change the style to overflow:hidden; to make the scrollbars disappear permanently.
Automatic overflow will work by doing nothing with the overflowing content if it fits in the container, but if it overflows by even a bit, it inserts scrollbars to allow the user to scroll. In your case, Chrome will probably recognise a single pixel of overflow, so insert scrollbars. This probably has to do with caching and image-loading. What I think is that if the image is already in the cache, Chrome knows exactly how big it is, and it knows the image will fit in the container, but when it's not cached yet, it reserves some space for the image to load in, and since that space is apparently slightly larger than the actual image, it will take up some extra space.
Check if body value for you is set to overflow:hidden;
If it is, than change it ;)
The same Issue occurred to me while coding in Next.js
just set overflow: hidden; for the Html tag in the global.css file.