I am using react swiper from 'swiper/react' for multiple components on my website and it works fine for every component it is used for except for one page. I have a top nav bar that is used as a promotional text banner and it swipes using autoplay every 5 seconds. This navbar exists on every page of my website, it works fine on every page except for one. The problem I'm having trouble shooting is because the swiper works fine on localhost, but once pushed to production, the swiper on this page is barely shown. You can see in the image below, that 2 characters in the swiper are present, and you can see in this image that the swiper is working as expected on every other page.
NOTE: On refresh, the full text is present for about a second before it is skewed and hidden.
The wrapper component styles are positioned to sticky, has a set height, a larger z-index than its background, display is flex. The swiper modules include Navigation and autoplay, loop is set to true, slidesPerView = 1.
What could be causing it to work locally but not work when deployed to a server? Any ideas as to why this functionality is present?
If you need more information please don't hesitate to let me know. Thanks for any advice in advance.
This looks like a CSS issue to me. What do you use for styling? Also, what's different between your localhost styles and the production styles? Note the differences and try to figure out what's missing, if you're not willing to share your code. I've seen cases (especially when using Tailwind) of missing styles in production because a certain plugin removes part of the styles that it thinks that are not used. Those cases are solved by whitelisting certain classes, but I can't tell for sure because I don't know your tech stack.
I've been trying to implement the temporary drawr on my project together with the responsive and elevated app bar, the responsiviness is working right but the transition of the drawer is gone, aswell as the hover effect of the list items the link how the header of my project is right now
I've tried to search but none of the results helped me.
Thanks in advance!
I am trying to include Carousel from reactstrap into my project. I copied the exact code to just see how that turns out. I have tried everything but the resultant product is this...
Don't know what I am doing wrong. Does anybody have any idea ?
I am running a gatsby app / react with styled-component and I have a form and everytime I update a value in the form it will quickly flash the screen even the nav items will flash very quickly. It is very jarring and I am looking at how to solve it. I have looked around the console with no errors and also looked for anything that would look like an error in the react app and I can't find anything. Any help would be greatly appreciated. I've attached a link to show what I mean.
https://gist.github.com/dkbollig/8cff76519cb355d1806b7bf263f2823a
Example of Issue
I have an input field that I have styled with Styled Components. As far as I can tell, everything is fine and it should work without any problems.
However, when I load the page, the input field load with the default browser styles. Only if I make a change to the code will the proper styles show up with hot reloading.
I have made a video showing the problem in case that helps: https://www.loom.com/share/3f9c7a8e7b7a4a85a93332761ea65e2f
In case it is relevant, this is a Gatsby site.
Also, in case it helps -- here is a CodeSandbox link to the project: https://codesandbox.io/s/fresh-cms-version-003-z2724?fontsize=14
Any ideas why this is happening and how to fix it?