I am writing a webpage using React. I implemented a swiper on the landing page using Swiper. Its slides include an image and a few text blocks, very typical.
The animation works completely fine and smooth for FireFox, Safari, Edge, etc. However, the swiping motion is very buggy in Chrome. After spending some time to figure out why, I found that the issue can be hot fixed by disabling Chrome ‘Use hardware acceleration when available’ setting option. I also tried enabling Swiper CssMode, but it is not helping.
The webpage is supposed to be smooth to public users, turning HW acceleration off is not a feasible cure. Did anyone encountered similar problems before who can give me some clue?
Another observation I have on my React page is that, upon refreshing the webpage, if I scroll down quickly to the bottom, everything down there (other page content and footer) is blank. They display correctly after 3 seconds of rendering. This problem only occurs in Chrome, with HW acceleration on as well.
<div className='Latest-Swiper Content-Container'>
<Swiper loop={true} navigation={true} id='Latest-Swiper'
// cssMode={true}
observer={true}
uniqueNavElements={false}
onAfterInit={(swiper) => initBackground(swiper)}
onRealIndexChange={(swiper) => updateBackground(swiper)}
modules={[Navigation, Pagination]}
pagination={{
enabled: true,
el: '.Latest-Swiper-Custom-Pagination',
renderBullet: (index, className) => {
return '<span class="' + className + '"></span>';
},
}}
>
{articles.map((article, index) =>
(
<SwiperSlide className={article.category}>
<div className='Latest-Swiper-Title-Wrapper'>
<p className='Latest-Swiper-Title Latest-Swiper-Title-Mobile'>{article.title}</p>
</div>
<div className='Latest-Swiper-Image-Wrapper'>
{/* Post image */}
<img className='Latest-Swiper-Image' src={'sample.jpeg'} alt='' />
</div>
<div className='Latest-Swiper-Desc-Wrapper'>
{/* Desc */}
{article.body}
</div>
</SwiperSlide>
)
)}
</Swiper>
<div className='Latest-Swiper-Custom-Pagination' />
</div >
Thanks in advance.
Related
I have made a mini chat box on an application that sits about mid way down the site on the 3rd section. I'd like to have this chat box always scrolled to the bottom when people type. I am currently using the bellow:
ChatMessage.js
const messagesEndRef = useRef(null)
const scrollToBottom = () => {messagesEndRef.current.scrollIntoView({ behavior: "smooth", block: 'nearest', inline: 'start' })}
useEffect(scrollToBottom, [messageUser]);
return (
<>
<div className='text-left my-2 mx-2'>
<span className={`inline-block pr-4 pl-2 py-2 ${messageClass} rounded-lg`}>
<span className='text-xs'>{username}</span><br />
<span className='text-md font-bold'>{text}</span>
</span>
</div>
<div ref={messagesEndRef} />
</>
)
ChatBox.js
{messages && messages.map(msg => <ChatMessage key={msg.id} messages={msg} user={props.user} /> )}
This solution has an issue when the user is actually not on the chat box page. If the user is to scroll to the top or bottom of the website, each time a message occurs the user if forced up to the chat box. Is there a way that I can have just the chatbox itself scroll to bottom without affecting the users exploring the rest of the site?
I tried thinking of using an iFrame or something but that didn't seem like it would be the best solution.
Thanks in advance.
i think ChatBox component should have be set position: fixed and stay on bottom and user can minimize or expand ChatMessage component every they want chat or not.
I am working on a portfolio site with React.js as a self-learning project for my software engineering course. My goal is to make a heavily animated portfolio site.
I am currently experiencing a bug where the entire page freezes up for a bit when using a react-reveal animation on my photo in the about section (About.js component). However, the animation works just fine on the text directly next to the image.
The navbar (Navbar.js component) contains the react-scroll code which is just simple Link to the id of each section. One thing to note is that the animations also work fine if the user manually scrolls. I have also tried in a variety of browsers.
I thought that the issue might have been caused by having too many animations running at once, causing lag, but I tested multiple react-reveal animations together and it has no problem so long as there is no scroll taking place. I also tried delaying the animations, but that led to the same frozen results. I included a video of the problem and the project github linked below.
About.js
...
const About = () => {
return (
<>
<div id='about' className='aboutSection'>
<br />
<div className='aboutBox'>
<div className='aboutText'>
<Fade left><h1>About Me</h1>
<p>Placeholder for purposes of post</p>
</Fade>
</div>
<div className='aboutPicture'>
<Fade right><img src={headshot} id='headshot' /></Fade> {/*This fade is causing the issues*/}
</div>
</div>
</div>
</>
)
}
Navbar.js
...
<div className='mainNav'>
<ul>
{/* <NavLink to='/' exact className='nav' style={{ textDecoration: 'none' }}> */}
<li id='title'><Link to='top' smooth={true} ignoreCancelEvents><button className='navTitleText'>Mitchell Conrad</button></Link></li>
{/* </NavLink> */}
<li className='nav-item'><Link to='about' spy={true} smooth={true} ignoreCancelEvents><Button scrollButton={props.scrollNav}> About </Button></Link></li>
<li className='nav-item'><Link to="projects" spy={true} smooth={true} ignoreCancelEvents><Button scrollButton={props.scrollNav}> Projects </Button></Link></li>
<li className='nav-item'><Link to="resume" spy={true} smooth={true} ignoreCancelEvents><Button scrollButton={props.scrollNav}> Resume </Button></Link></li>
<li id='contact' className='nav-item'><Button onClick={() => modalRef.current.open()}> Contact </Button></li>
</ul>
</div>
...
Video of Issue
Full Project Github Link
I appreciate any advice/direction to take to work around this or fixes. Maybe I am missing something simple here, but I can't figure it out for the life of me.
I'd like to create the desired results as seen here.
Please view in Desktop widescreen. AirBnb results.
As you can see with the AirBnb results, the Map on the Righthand side sticks perfectly into place while allowing the user to scroll down to view the results on the Lefthand side.
I've been trying to figure out how they have achieved this but am reaching some road blocks. I found some luck with implementing this bit of code but there is still a slight amount of vertical scrolling before the bottom of the map snaps into place. I believe it has to do with the h-screen class making the map height: 100vh
<main className="flex">
{/* Results & Filters section - Left side */}
<section className='flex-grow'>
<div className='lg:inline-flex mt-5 mb-5 space-x-3 text-gray-800 whitespace-no-wrap'>
<p className='custom-button'>Cancellation Flexibility</p>
<p className='custom-button'>Type of Place</p>
<p className='custom-button'>Price</p>
<p className='custom-button'>Rooms and Beds</p>
<p className='custom-button'>More Filters</p>
</div>
<div className="flex flex-col">
{/* Search results */}
{searchResults.map(
({ img, location, title, description, star, price, total }) => (
<InfoCard
key={img}
img={img}
location={location}
title={title}
description={description}
star={star}
price={price}
total={total}
/>
))}
</div>
</section>
{/* Map section - Right side */}
<aside className="hidden h-screen w-[50%] sticky xl:inline-flex l:min-w-[600px] top-0">
<Map searchResults={searchResults} />
</aside>
</main>
Some help would be greatly appreciated. I've started a codesandbox to make it easier to see what I'm experiencing. Please view in Desktop widescreen
https://codesandbox.io/s/determined-bartik-2tftc?file=/pages/index.js
[Edit] : I just noticed the left side is hidden by the map now since the map is out of the flex flow. I'll keep the answer as an idea. If you can manipulate the architecture of the page, it's easy to fix.
Looks like applying :
position: fixed;
right: 0;
justify-content: end;
to the aside tag that contains the map and removing its top-0 class fix your problem. I see that you are using an external library to display the map so I don't know if there is a way to apply css to it since I can't edit the codesandbox sorry. You could just wrap it in a span with a class and target it with .my-class > aside in your css. But first check the documentation, they are probably exposing some classes for you to apply styles.
So I seemed to have solved this. Took a bit of work but I achieved the result I was looking for.
I added some root css here in globals.css file
:root {
--navigation-bar-offset: 90px;
--gp-placement-max-height: calc(100vh - var(--navigation-bar-offset, 80px));
}
I utilized these root class names to be used in index.js on the component parent div
<div className="w-full
sticky
top-[var(--navigation-bar-offset,80px)]
h-[var(--gp-placement-max-height,auto)]">
<MapBox searchResults={searchResults} />
</div>
I also found, that Mapbox was overriding my height from it's setViewport callback in Map.js. So I overrode Mapbox by adding this code in Map.js in the onViewportChange.
onViewportChange={nextViewport => setViewPort({ ...nextViewport, width: "100%", height: "100%" })}
I updated the Codesandbox to reflect these changes.
Also, if you resize the browser, it maintains height and width.
So I am trying to animate a container with an background image and some text. I have set a config of duration and opacity of 0 to an opacity of 1 but the component loads normally. I do have the component as part of a private route. Its the page that displays after loggin in.
to= {{opacity:1, marginTop:0 }}
config = {{delay:4000, duration:4000}}>
{(props) => (
<div style={props}>
<div style={{ backgroundImage: `url(${cancer})`}} className="container-img">
<h2> What is Cancer?</h2>
<p className="paragraph">
The dogmatic view of cancer has been around for a long time.
This view is called the Somatic Mutation Theory. This Theory is
believed that cancer arises from damaged DNA in the cells that
causes out of ccontrol growth.
</p>
<p className="paragraph">
New Evidence shows that Cancer is caused by the damage to the
mitochondria causing the cells to fall back on ancient pathways
of fermentation. Cancer cells ferment Glucose and/or Glutamine
for energy or ATP.
</p>
<p className="paragraph">
If Cancer is a genetic disease, then why when they did a
scientic experiment in the 1960's where they took the
mitochondria of a cancer cell and put it in a normal cell the
cell turned cancerous. This theory is called the Metabolic
Theory of Cancer.
</p>
</div>
</div>
)}
</Spring>
</>
);
};
You're passing SpringValues to a regular dom element:
<div style={props}>
What you want to be doing is passing them to an animated element:
// import { animated } from 'react-spring'
<animated.div style={props}>
As described in the docs
Imagine, rendering multiple iframes (using react-frame-component) and allowing users to reorder them.
Surprisingly, when iframes are reordered, the <body> of one of them becomes empty.
I raised an issue here, but wonder maybe someone here would be able to assist as well since there is no much activity on the repo lately.
function App() {
const [frames, setFrames] = useState(["first", "second"]);
return (
<div className="app">
<div className="framesContainer">
{frames.map(frame => (
<div className="frame" key={frame}>
<Frame style={{ width: 200, height: 200 }}>
<h1>Hello World</h1>
</Frame>
<div>{frame}</div>
</div>
))}
</div>
<div className="actions">
<button
onClick={() => {
setFrames(frames => [frames[1], frames[0]]);
}}
>
Swap frames
</button>
</div>
</div>
);
}
After clicking the button, first iframe's <body> becomes empty.
CodeSandbox
I face the same issue when using react-dnd / react-beautiful-dnd to do multiple iframe reordering and sorting.
The only method I found is to force the iframe component to rerender when the orders state update. However, the app could be extremely slow when all iframe update at once.