Here is the link of the website https://ecom-website-f483.vercel.app/ after website homepage is completely loaded and then if you scroll little faster you will start seeing blank screen and after few milliseconds component appears again.
Related
I am facing a issue while trying to update scroll fast in my application. Screen became blank while scrolling fast.
I have added video link.Issue Video
I was trying to make smooth render on contact list but adding 50 per conacts scroll blank space was coming.
I have a React website here: www.assertivesolutions.ca.
If you visit the site in Chrome and scroll down to the "What We Do" section and click on the "Our Services" button, you get taken to the Our Services page. Notice is starts further down on the page and scrolls up to the top. This is because, as an SPA, it doesn't really go to a different page; it stays on the same page and just changes the content. So if you're scrolled half way down the page before you click the button, it will still be half way down the page after you click the button. So I implemented a fix to scroll to the top in the componentDidMount() hook:
componentDidMount() {
window.scrollTo(0, 0);
}
However, if you try the same thing in Firefox, it does not work. It stays scrolled half way down the page.
So I can take two approaches to solving this:
Figure out how to get scrolling to work in Firefox.
Figure out a different way of making sure the Services page loads at the top other than using window.scrollTo(0,0).
I'm leaning towards 2) because I have to imagine there must be a way in SPA websites to accomplish what I want.
Does anyone know how I can accomplish either 1) or 2) (preferably 2).
I have a fully functionnal SPA website (Reactjs) which I just made responsive. Everything went smooth except that the site refuses any "scroll movement" on the body, preventing the mobile browser bottom bar to disappear. It is a one page website which I created to have everything displayed full-screen (no need to scroll anything), so I suppose that it is CSS linked, but I just have absolutely no clue on what is happening. Actually, on my Samsung S20+, only the opened burger menu accepts any page scroll movement, permitting me to hide those navigator bars (up and bottom). But once again, I see no specific CSS differences between that burger menu and the main page. Could anyone help me on this ? I'm so lost with it that I don't even know what kind of information I could add in this post except the URL of the website: https://www.epistolads.net.
NB: the sources maps are available on the website, for testing purpose
EDIT 1: just noticed that I can achieve the desired result (scroll on page to hide nav bar) by first zooming a little, if it speaks to anyone.
EDIT 2: Also, I may no "refresh the website" by scrolling "out of screen" up.
Ho mine, got it ! Some month ago, to be sure that no forgotten content gets out of the screen, I added a "overflow-y: hidden;" on the body of the index.html file itself! Changing it back to "auto" gave me back full control on mobile. In case of other people would meet the same problem...
I'm under the development progress of nextjs based application and found some fuzzy stuff that's giving bad experience..
I'm just here to ask you whether it's possible to cache pages on nextjs development mode.
Now the problem is that I'm getting white blank screen for some seconds everytime I reload any pages. Changing route works properly and doesn't come with blank white screen.
Only when I reload the page by pressing F5 or clicking reload button, it shows me blank white screen on all kinds of web browsers. I know I can set the background color of index.html which will overlays during page loading but I don't think it can be the final solution to fix blank white screen.
Are there any way to solve the issue ?
I have an eCommerce site where there are product cards displayed in a grid. I am using react-semantic-ui grids and cards. Even when there are few cards, ex: 5-6 If I scroll too fast the screen flickers and slows down. The components disappear and when I stop scrolling they reappear but there's a visible lag. This is even more apparent on mobiles.
The page in question is here
I tried react-window and react-virtualized they don't seem to do much and overcomplicates the whole thing. What can I do to solve this?