Finally working - separated fixed and flexi height parallaxing to pull it off

src/js/components/Parallax.js

@@ -56,8 +56,10 @@ export default class Parallax extends React.Component{
 		if (this.state.loaded){
 			class_name += " parallax--loaded";
 		}
-		if (this.props.boxed){
-			class_name += " parallax--boxed";
+		if (this.props.fixedHeight){
+			class_name += " parallax--fixed-height";
+		} else {
+			class_name += " parallax--flexible-height";
 		}
 
 		var style = {};
@@ -67,8 +69,10 @@ export default class Parallax extends React.Component{
 
 		return (
 			<div className={class_name}>
-				<div className="parallax__image" style={style}></div>
-				<div className="parallax__overlay"></div>
+				<div className="parallax__layer">
+					<div className="parallax__image" style={style}></div>
+					<div className="parallax__overlay"></div>
+				</div>
 			</div>
 		);
 	}

src/js/views/Artist.js

@@ -307,7 +307,7 @@ class Artist extends React.Component{
 			<div className="view artist-view preserve-3d">
 				<div className="intro preserve-3d">
 
-					<Parallax image={image} boxed />
+					<Parallax image={image} fixedHeight />
 
 					<div className="liner">
 						<h1>{this.props.artist ? this.props.artist.name : null}</h1>

src/scss/components/_parallax.scss

@@ -7,17 +7,19 @@ $parallax: 'parallax';
 	right: 0;
 	height: 100%;
 	max-height: 60vh;
+	z-index: -1;
 
 	&__image {
 		@include animate(0.5s);
-		width: 100%;
-		height: 100%;
+		position: absolute;
+		top: -10px;
+		left: -10px;
+		bottom: -10px;
+		right: -10px;
 		background-repeat: no-repeat;
 		background-size: cover;
 		background-position: 50% 30%;
 		opacity: 0;
-		transform: translateZ(-400px) scale(1.4);
-		transform-origin: top center;
 	}
 
 	&__overlay {
@@ -32,9 +34,20 @@ $parallax: 'parallax';
 		z-index: 1;
 	}
 
-	&:not(&--boxed) {
+	&--flexible-height {
+
+		/**
+		 * We need to apply the transform on the whole parallax. I think this is because
+		 * our 'frame' is the entire <main> element, rather than a fixed-height sub-element
+		 **/
+		transform: translateZ(-400px) scale(1.4);
+		transform-origin: top center;
+		overflow: hidden;
+	}
+
+	&--fixed-height {
 		.#{$parallax} {
-			&__overlay {
+			&__image {
 				transform: translateZ(-400px) scale(1.4);
 				transform-origin: top center;
 			}

src/scss/views/_artist.scss

@@ -81,10 +81,6 @@
 		.intro {
 			margin-bottom: 0;
 
-			.parallax {
-				height: 60vh;
-			}
-
 			.liner {
 				padding-left: 0;
 				padding-right: 0;