Parallax background image changing size on mobile upon passing mobile address bar

Question

I have been hitting a wall with my parallax element for a week now. Asking for help is a last resort for me. I have looked into the various forums for solutions to these issues, but nothing I have tried has worked.

(only on mobile (chrome) ) -If you are holding the touch screen, and continuing to scroll down, after the initial screen image, a white bar comes up (the end of the .parallax-container, but the text comes up over that. Later iterations of this project reveal that the rest of the page - past the parallax container and this white bar - will not scroll onto the screen until this writing is in the position that it should have been in.

-If you are scrolling down from the original screen a little at a time, the .parallax-background image resizes (looks slightly more expanded/zoomed in) after passing the browser's address bar. The rest of the page works normally. No issue with the white bar, writing, or the rest of the page.

I know these two issues are somehow connected.

What do I need to do so that the scrolling is going to be smooth on mobile like it is on desktop with no .parallax-background image resizing, or issues with going outside of my parallax container like I currently am?

Only potential code fixes/solutions please.

*I have continued to work on this, and have solved the nav bar issue ( not lining up), but still am having issues with the mobile scrolling.

/*Navbar*/

.navbar {
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url('https://images.unsplash.com/photo-1501924497965-792fefaea3dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80');
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  object-fit: cover;
  object-position: 0, -200%;
}


/*Hamburger Icon Transition*/

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  align-self: right;
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.5s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  opacity: 0;
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  opacity: 0;
}

.fork {
  position: absolute;
  top: -58px;
  left: -35px;
  opacity: 0;
  transition: 0.4s;
}

.knife {
  position: absolute;
  top: -35px;
  left: -34px;
  opacity: 0;
  transition: 0.4s;
}

.change .fork {
  opacity: 1;
  transition-delay: 0.4s;
}

.change .knife {
  opacity: 1;
  transition-delay: 0.4s;
}


/*Hamburger Icon Transition Ends*/


/*Navbar Ends*/


/*Main Page Top Parallax Element*/

.parallax-container {
  perspective: 1px;
  height: 0fr;
  overflow-x: hidden;
  overflow-y: hidden;
}

.parallax-background {
  background-image: url("https://images.unsplash.com/photo-1501924497965-792fefaea3dc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");
  /* Set a specific height */
  /*min-height: 700px;*/
  /*Parallax Scrolling Effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/*.layer1 {
                position: absolute;
                left: 0;
                top: 50%;
                width: 100%;
                position: center;
            }

            .layer1 .logo {
                transform: translateZ(0px);
                position: relative;
                background-size: cover;
                top: -100px;
                max-height: fit-content;                
            }*/

.layer-1 {
  transform: translateZ(0px);
  position: relative;
  background-size: cover;
  top: -100px;
  max-height: fit-content;
}

.logo {
  object-position: center;
  background-repeat: no-repeat;
  opacity: .2;
}


/*Main Page Top Parallax Element Ends*/

@media(max-width: 768px) {
  .parallax-container .parallax-background,
  .parallax-container .parallax-background {
    background-attachment: scroll !important;
    background-size: cover;
  }
}

@media screen and (max-width: 768px) {
  .logo img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}




        
        







  

  

  

  

  
    
      
        Home
      
      
        Menu
      
      
        About Us
      
    
  






      
        
      
      
            Spicy Dishes

             
            
Home cooked feel
By award winning
Chef
        
   

  next element

Parallax background image changing size on mobile upon passing mobile address bar

0 Answers