I have an issue where my left menu container is filling the entire width of the screen until after a specific point in the loading process, and then the menu shrinks to the correct size and the body shifts up the page to fill the newly available space left by the shrinking menu.
I've tried addressing this through editing the css but have had no luck
The site uses bootstrap and I think that the problem is related to bootstrap, but haven't been able to pinpoint the exact issue,
One of the .js files (main.js) seems to be associated with the issue, when I disable this .js file in chrome dev tools, the menu stays the full width at the top of the page (full width is not desired) and then when I re-enable main.js and reload the page the menu eventually does shrink to the correct size, but again has the unwanted effect of the menu filling the page, and a second later shrinking to the desired size.
As a result my page is failing the Content Layout Shift (CLS) test, so now I am looking at work arounds that might hide the page or prevent paint until after the point where the content layout shift happens.
Any suggestions? I'm really scratching my head at this point
Related
I have a position:fixed footer on a huge form that has been moving after opening the keyboard and scrolling a bit. It happens because the address bar shows/hides, and the footer moves the same height as the address bar, going up and down. The elements are actually visible where they should be, but touch events and inspecting via Chrome dev tools shows it is misplaced.
This screenshot shows this weird behavior:
remote device inspect
I have tried forcing hide/show after focus in/out of inputs. I also tried the footer inside the container and after it. (and some other stupid ideas that didn't help). I thought about changing the element in every scroll, but this page has a form with 150 questions (some with sub-questions) and already is quite heavy.
Any ideas?
I can't seem to figure this issue out.
On a website I created located here: website
I have 4 top navigation bar options:
Home
About
Members
Contact
Every time you select Home from any other menu option, the CSI logo shifts a bit to the right, and returns back to original position.
Anytime the starting point is from Home, and you go to About or Contact, the logo shifts again, but not if you go to Members. However, if you go from Members to Home, the logo shifts again.
This logo shifting does not occur if you navigate to any other options besides Home.
In Home, which links to my index.html, I have some slider images via javascript, and the only way I know how to temporarily fix this logo shifting is using an inline styling (could be external or internal) and shift the slider images down from the top 351px. Anything less than that will cause an issue.
<section class="slider" style="margin-top: 351px;">
Does anyone know what the issue could be?
Thanks!
I think your problem is in the vertical scroll of browser) You have a lot of content to other pages and this causes the vertical scroll, and the vertical scroll has a width 13px (Google chrome), so the title is moved :)
I'm having an issue with a page auto scrolling to the middle rather than starting at the top when the user reaches it via links. For instance, when I click any of the buttons that say "[#] Recommendations" below the image, the link takes me to that image's recommendations page. The problem is that if the page has more than one recommendation, as in these particular requests:
http://whatgoeswiththis.co/#request/8
http://whatgoeswiththis.co/#request/5
The page loads scrolled halfway down. If there isn't a recommendation uploaded yet, it appears to load fine.
Appears to be a problem on all browsers, and it appears that the scroll is set to a random location depending on number of recommendations that have been uploaded. The page has a regular HTML/CSS header, but everything below the top inch is handlebars.js scripts.
How can I make it so that any time the user reaches the recommendations page it starts at the top of the page? I don't want to add a new javascript tag, I'd prefer to remove whatever is causing the scrolling if possible. Thanks!
I finally realized what the problem was. I had this exact same problem on a Backbone app I was working on awhile back. The problem is that the page remains at the exact same scroll position when you click on a request-card. So depending on how far down the home page you scroll will determine where on the request page it looks like you landed.
I'm not sure how best to fix this on your site, so I'll describe what we did to fix it on ours. On our website, we just rebuilt the DOM of the main element on our site so that the scroll position would be reset to 0. For your site, this would mean that the template for the homepage would only have the elements within #homepage, and when you click on a link, a new template is used that contains everything inside #requestpage.
I have a jQuery plugin that makes pages dynamic (found here: http://css-tricks.com/dynamic-page-replacing-content/ - Demo here: http://css-tricks.com/examples/DynamicPage)
My nav bar is in the footer (I know this is not generally a good idea but it suits the layout and objective of my website).
When there is not much content on the page, obviously the footer is in view on the window so no action needs to be taken. However, when a longer dynamic page is loaded which requires a scroll bar, the footer is pushed out of the window to make space for the content.
I want the footer to STOP and fix itself to the bottom of the window if the dynamic page creates a scrollbar, essentially so the navigation is always in view.
I've looked at other solutions on this site, but it's all either to permanently stick the footer to the bottom of the window, or only fix to the top when scrolling. I've tried inverting those solution values (i.e. changing top to bottom) but to no avail.
Could anyone help?
wrap in a DIV with overflow auto or scroll
Visit the following site in chrom and teh first time the page loads the top nav displays on two lines, if you click to another page then home again the top nav displays correctly (all on one line), why is this?
I thinkit may be javascript related but can't get to the bottom of it.
Any ideas?
http://berrisford.gumpshen.com
I don't know how it does this, but if you inspect the code around your little house image, in some cases it has a style of 16.7px padding, left and right, and other times 19.5px.
Seriously, fractional pixels?
Figure out why it generating 2 different styles (there are other differences in the source of the page) and you'll have your answer.