Encountering an unusual issue with flexbox on a mobile browser.
For a visual demonstration, view this gif
Specifically happening on Chrome mobile on a Google Pixel phone. Using a resize script to adjust element sizes due to limitations with 100vh:
window.onresize = function() {
document.getElementById("backgroundImage").style.height = window.innerHeight;
document.getElementById("mainScreen").style.height = window.innerHeight;
if (window.innerWidth > 750) {
document.getElementById("scrollContent").style.height = window.innerHeight - "96";
} else {
document.getElementById("scrollContent").style.height = window.innerHeight - "72";
}
};
The issue occurs when scrolling to hide the navigation bar and clicking on one of the flex links.
Using Vuejs to dynamically populate content based on prop changes. Flex links trigger a function to switch project views.
Also adding a class to change link background colors upon selection.
var webComp = Vue.component('design-comp', {
template: "#webComp",
props:['trans-state'],
components: {
'project-comp': projectComp,
},
data: function() {
return {
activeProj: 'default',
}
},
methods: {
changeProj: function(proj) {
this.activeProj = proj;
var a = document.getElementsByClassName('projClick');
for (i=0; i<a.length; i++) {
a[i].classList.remove('projActive');
}
event.currentTarget.classList.add('projActive');
document.getElementById('webContainer').scrollTop = 0;
}
},
created: function() {
this.activeProj = "default";
}
});
Snippet from SASS file:
#webContainer {
margin-top: 50px;
height: calc(100% - 50px);
.projHeader {
display: flex;
justify-content: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: $headerColor;
box-sizing: border-box;
.projClick {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
height: 50px;
box-sizing: border-box;
background-color: $contentColor;
border-right: 2px solid $headerColor;
border-left: 2px solid $headerColor;
border-bottom: 4px solid $headerColor;
border-top: 4px solid $headerColor;
flex-basis: 50px;
transition: background-color 0.3s;
&.projActive {
background-color: $linkActiveColor;
}
p {
color: $fontColor;
font-family: $titleFont;
font-size: 2em;
}
}
}
}
HTML structure:
<div class="viewContainer" id="webContainer">
<div class="transitionBox"></div>
<div class="stickyImageBottomLeft"><img src="./img/AfricaMountainPixelR.gif" /></div>
<div class="stickyImageBottomRight"><img src="./img/AfricaMountainPixel.gif" /></div>
<div class="projHeader">
<div class="projClick projActive" v-on:click="changeProj('default')">
<p>0</p>
</div>
<div class="projClick" v-on:click="changeProj('kyount')">
<p>1</p>
</div>
<div class="projClick" v-on:click="changeProj('prodigal')">
<p>2</p>
</div>
<div class="projClick" v-on:click="changeProj('joy')">
<p>3</p>
</div>
<div class="projClick" v-on:click="changeProj('cgl')">
<p>4</p>
</div>
<div class="projClick" v-on:click="changeProj('mikeg')">
<p>5</p>
</div>
<div class="projClick" v-on:click="changeProj('reddit')">
<p>6</p>
</div>
<div class="projClick" v-on:click="changeProj('westbeach')">
<p>7</p>
</div>
</div>
<div class="contentContainer">
Project Page is loaded here
</div>
</div>
Seeking insights into the unexpected behavior occurring in this scenario.