Scrollspy | Scrollspy is something that I needed to include | Menu library

Found the answer - I simply had to add this bit of code in the navigation.js file:

navigation.js

You didn't add the check for entry.isIntersecting for the elements being observed. Also I switched from toggle to add the is-visible class. Currently I am not sure if you want to remove the is_visible class when element is not visible but that can be done in the else part of entry.isIntersecting.

So for now as soon as our element get's visible, I stop observing it.

I think you can achieve this with the scrollable_positioned_list package made by Google Fuchsia Authors.

The ScrollablePositionedList provides a ItemPositionsListener:

Found the problem.

Rails recently started sending a Link header with all assets so the browser can preload them. See this PR.

The problem is that in development that header can get pretty big (as was the case with my admin page). Puma worked fine with the giant header, but Apache was truncating the headers to 8 KiB (of which 7.58 was the truncated Link header) and not sending a complete response, hence the missing Content-Type.

I simply disabled the feature in Rails (see this PR) by adding this to config/environments/development.rb:

It should be possible to get the required 'filling' effect using just CSS.

We add a pseudo before and a pseudo after element to each of the li elements. These have a radial-gradient background which has a transparent 'bite' out at the position of the circles containing the a (anchor) element. Behind the whole thing we put a fixed element which has the 'fill' color in the top half and the darker (non-filled) color in the bottom half. This is done by giving it a background image which is a linear gradient.

The inner divs (inside the anchor elements) are not now needed.

Here is a snippet to show the idea. CSS variables have been introduced to make it easier to change dimensions if required. (Note: there is redundant CSS in here which could do with tidying up.)

I fixed my issue, I switched from css to javascript in order to solve it, I couldn't find a way to solve it with css. I removed this line:

I think that your issue comes from the Scrollspy and the mix of routing you are using there. You are using the react-router-dom while Gatsby extends from @reach/router so you don't need to handle and overkill your project with Router or Switch components, Gatsby's link () does all the job for you.

Try ignoring the transpilation of the react-scrollspy dependency in your gatsby-node.js by calling onCreateWebpackConfig API and adding a null loader.

As I was saying, it's not Netlify's fault since the project is not building locally. You should ensure always that your project is correctly coded in both environments (build and develop) since they have substantial differences between them. A project that works under gatsby develop doesn't mean that it's perfectly coded, only means that it work under certain conditions. You can check the overview between runtime and build-time in Gatsby's docs, the main difference relies on gatsby build's Gatsby Server-Side Rendering (SSR). Keep in mind that you are using jQuery, which points directly to the real DOM, having a high-performance impact on the site, while React, creates and manipulates a virtual DOM (vDOM) to avoid that kind of high-cost actions. It's odd using both approaches.

In addition, you are importing everything in the component, which will be used across your project in multiple components/pages. This may lead to multiple script rendering/loading if the component is rerendered.

Said that, your issue may be caused by:

• AOS.init();
• The script importation: since they aren't promises, they will be imported at the same time. If for some reason one of them is loaded first (the lighter) and it's dependant on the other one, it will break your project, since it won't be able to load. You are not loading jQuery, unless it's in scripts.js.

You have many approaches, from changing the approach and using a React-based one, to try to async the script importation (and loading jQuery before), but all the workarounds will need to be tested with some trials and errors:

You can't see the whole page because at some point (on the div you want to see) you have .d-none .d-xl-block , this will let visible the div with these classes only on xl screen devices

So you should remove these and it would become: