Hi i really need help on this one, I still can't figure out whats wrong with the scroll down in my website.
The problem:
-As soon as I resize my browser window to a smaller screen, the scroll down stops working
-The problem is happening only in Chrome
this is my website [www.outrippers.cl][1]
Related
I'm building a site for a client and man I'm having a hard time with CSS Scroll Snap in Chrome...
{{redacted URL}}
I'm using Chrome 109.0.5414.87 on OSX. After the intro animation (FYI I hate these but clients love them) you should see:
Scrolling from first red section into blue I see a flash
Scrolling from first red section into blue, often times it will almost get to blue, but then glitch back to red.
You can actually scroll UP past the top of the page
Works great on Firefox and even Safari (OMG).
All the issues seem to be related to going from first slide to the second.
I have noticed that the length of the scroll-handle seems to change when going from section 1 to 2, I have no idea why but perhaps that is related?
Any tips or help would be most welcomed!
OK looking into this now, I see that it was because I had an element (footer) at the bottom of the page that was toggling to display:none. Not sure why this should effect scroll snap, but I suppose it's because it is changing the length of the scrollbar and Chrome didn't like that.
This doesn't stop the scroll up issue (#3), but it does seems to solve all the visual glitches.
So for all future people: When using scroll-snap, make sure you aren't doing anything that might change the height of the page during scroll, Chrome doesn't like that. 100vh on mobile was another culprit of this.
I have a strange issue happening just in Firefox that disappear when I resize the browser page.
The issue is on the header, normally, on a Desktop mode, the logo it's in the center with two menu, one on the left and one on the right. In Firefox I see just the logo on the left and the menu all on the right part.
I tried to explore the code and see where this issue is coming from but I can't find any solution. Can someone help me please?
https://ruggerocarrara.com
Thank you so much!
I'm working on a new WordPress site, and am running into an odd issue on the homepage, which is supposed to execute a nice fade-in/fade-up effect on initial page load.
Works fine in Firefox, and most of the time in Chrome. But, nearly every first-load in Edge or IE11, the section below the top "slideshow" remains large, not-scrolled-into-place, and blank.
If you resize the browser window, possibly scroll up/down, it slides in/up as is should, and then you can restore the browser to full-screen... but on reload, it's lost again. (For reference, there should not be a huge white space below the slider, but rather a thin gray bar with text.
Any thoughts/suggestions? The site's live at http://blueheron8.com ... any point in the right direction would be appreciated.
I am experiencing some weird floating-behavior in Google Chrome within the first responsive project I am working on.
I've uploaded an anonymized version of my responsive header here: http://files.uiux.de/140618_header/
Whenever I visit this page on a desktop with Google Chrome, having no cache of the page, the contact-information in the right-hand corner seem to have a margin-top and 'broken' floating of the icons. As soon as I reload the Page, the position is automatically fixed.
I can reproduce this behavior by resizing the Chrome window to it's narrowest setting, refreshing the page and then resize Chrome until the contact-information shows up again.
I am baffled by this behavior. Firefox and Safari work just fine. Can someone explain to me what is happening there and maybe offer a possible solution?
Here's a screenshot of both the initial rendering and the one after refreshing.
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.