Styles messed up when going back using the chrome back button

[bhavesh-hirani]

Bug report

All my pages are SSR. When I click on the browser back button, the styles get messed up. This is happening in chrome only. I have tried Safari and FireFox. both work fine.

Describe the bug

When I click the back button on the browser, the page style is not correct. the css file loads fine.

To Reproduce

Chrome version 86.0.4240.75 (macOS)

1. Go to 'https://ac.cki.com.au/membership'
2. Click on 'Join Now'
3. Go back using chrome back button.
4. See error

*** Sometimes there is no issue. but most of the time there is.

Expected behavior

Page should be rendered as usual.

Screenshots

System information

• OS: [e.g. macOS]
• Browser: Chrome
• Version of Next.js: 9.5.5
• Version of Node.js: 12.18.4

Additional context

Does not happen in dev mode. Happens only in production.

[jamesmosier]

I don't believe this is an issue with Next from looking at the DOM between the broken and working states.

If I had to guess it seems like owl carousel isn't being initialized properly or there is some other issue with the logic that renders the markup.

On the broken page, the <div class="item"> wrapper is missing around your carousel item:

While on the working page, you'll see <div class="item"> is present.

---

If you have a minimal reproduction of this in code that would be massively helpful in tracking this down.

[hirani89]

I have tried this on a html + css + js only environment. No nextjs or react. Seems to work fine there. this is what my code is like.

Membership.tsx

import React from 'react';
import MembershipTable from "../../components/Memberships/MembershipTable";
import MembershipFeatures from "../../components/Memberships/MembershipFeatures";
import Sidebar from "../../components/Sidebar/Sidebar";
import ReactHtmlParser from "react-html-parser";

const MembershipLanding = ({features, table, conditions, cards, header, social}:any) => {
	return (
		<>
			<div className="masterhead masterhead-page"
			     style={{backgroundImage: `url(/dist/images/placeholders/banner-1.jpg)`}}>
				<div className="container">
					<div className="masterhead-body">
						<h5>MEMBERSHIPS & LICENCES</h5>
						<h1>Let’s Ride Together</h1>
					</div>
				</div>
			</div>

			<div className="section section-main-page">
				<div className="container">
					<div className=" section-flex-row">
						<div className="section-flex-body">
							<div className="section-main-heading">
								{/* @TODO Replace with dynamic content*/}
								{ReactHtmlParser(header)}
							</div>
							<div className="section-plans mb-5">
								{/*	@TODO Insert dynamic accordion Here */}
								<MembershipFeatures features={features}/>
							</div>
							{/* @TODO Replace with dynamic content*/}
							<div className="card-deck">
								{cards.map(({name, description, button}:any, i:number) =>
									<div className="card card-default">
										<div className="card-body">
											<h4 className="card-title text-primary">{name}</h4>
											{ReactHtmlParser(description)}
											<a href={button.url} className="btn btn-primary">{button.label}</a>
										</div>
									</div>
								)}
							</div>

							{/* @TODO Insert dynamic table here*/}
							<MembershipTable data={table}/>
							<div className="section mt-3">
								{ReactHtmlParser(conditions)}
							</div>
						</div>
						<Sidebar ad={true} nav={true} social={social} subscribe={true} trial={true} pt={''}/>
					</div>
				</div>
			</div>
		</>
	);
}

MembershipFeatures.tsx

import React from 'react';
import FeatureCard from "./FeatureCard";

const MembershipFeatures = ({features}:any) => {
	return (
		<>
			<div className="section-plans mb-5">
				<div id="accordionPlan" className="owl-carousel owl-theme carousel-plans">
					{Object.keys(features.memberships).map((key:string, i:number ) => <FeatureCard title={key} card={features.memberships[key]} index={i} key={i}/>)}
				</div>
			</div>
		</>
	);
}

export default MembershipFeatures;

FeatureCard.tsx

import React from 'react';
import ReactHtmlParser from 'react-html-parser';
const FeatureCard = ({title, card, index} : {title:string, card:any, index:number}) => {
	let colours = ['blue', 'purple', 'orange', 'green']
	return (
		<>
			<div className="item">
				<div className={`card card-plan card-plan-${colours[index]}`}>
					<div className="card-heading">
						<h3>{title}</h3>
						<span className="txt-h-1">{card.aimed_at}</span>
						{/* @TODO fill dynamically */}
						<span className="card-plan-price">From {ReactHtmlParser(card.fees_from)}</span>
						{/* @TODO fill dynamically */}
						<a href={card.url} className="btn btn-block btn-primary">Join Now!</a>
					</div>
					<div className="card-body">
						<div className="plan-accordion">
							<div className="plan-accordion-item">
								<div className="plan-accordion-heading">
									<button className="" type="button" data-toggle="collapse"
									        data-target=".collapsePlan-0" aria-expanded="true"
									        aria-controls="collapsePlan-0">
										Member Benefits
									</button>
								</div>
								<div id="collapsePlan-0" className="collapsePlan-0 collapse show"
								     aria-labelledby="headingOne" data-parent="#accordionPlan">
									<div className="plan-accordion-details">
										<ul className="list-check">
											{card.member_benefits.map(({benefit, included, optional_text}:any, i:number) => included && <li key={i}><p>{ReactHtmlParser(benefit)}{ReactHtmlParser(optional_text)}</p></li>)}
										</ul>
									</div>
								</div>
							</div>
							<div className="plan-accordion-item">
								<div className="plan-accordion-heading">
									<button className="collapsed" type="button" data-toggle="collapse"
									        data-target=".collapsePlan-1" aria-expanded="false"
									        aria-controls="collapsePlan-1">
										Insurance Coverage
									</button>
								</div>
								<div id="collapsePlan-1" className="collapsePlan-1 collapse"
								     aria-labelledby="headingOne" data-parent="#accordionPlan">
									<div className="plan-accordion-details">
										<ul className="list-check">
											{card.insurance_benefits.map(({benefit, included, optional_text}:any, i:number) => included && <li key={i}><p>{ReactHtmlParser(benefit)}{ReactHtmlParser(optional_text)}</p></li>)}
										</ul>
									</div>
								</div>
							</div>
							<div className="plan-accordion-item">
								<div className="plan-accordion-heading">
									<button className="collapsed" type="button" data-toggle="collapse"
									        data-target=".collapsePlan-2" aria-expanded="false"
									        aria-controls="collapsePlan-2">
										Club Benefits
									</button>
								</div>
								<div id="collapsePlan-2" className="collapsePlan-2 collapse"
								     aria-labelledby="headingOne" data-parent="#accordionPlan">
									<div className="plan-accordion-details">
										<ul className="list-check">
											{card.club_benefits.map(({benefit, included, optional_text}:any, i:number) => included && <li key={i}><p>{ReactHtmlParser(benefit)}{ReactHtmlParser(optional_text)}</p></li>)}
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div className="card-footer">
						{/* @TODO fill dynamically */}
						<a href={card.url} className="btn btn-block btn-primary">Join Now!</a>
					</div>
				</div>
			</div>
		</>
	);
}

export default FeatureCard;

And this is how I initialise owl-carousel

$(document).ready(function() {
     $('.carousel-plans').owlCarousel({
            loop:false,
            margin:10,
            nav:false,

            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:2
                },
                1000:{
                    items:4
                }
            }
        });
});

[vinicastro]

I had an issue like this, did you had a solution for that?

[ELHart05]

same here...

[Enkratia]

I can fix it if i add all components in first load js chunk, but chunk will be x2-4 size, that is not good.

If someone will find proper solution, please share, i'll do the same.

[Ashwithaabeera]

same here....