background-cover not working for ONLY ONE div on IOS

Despite having the SAME EXACT STYLE, the 2nd div just will not display the full rainbow gradient image on mobile and I really don’t understand why. I want the gradient in the bottom box to be identical to the one on the top, instead of randomly stopping at yellow. background-cover doesn’t seem to be working, but only for this one div???

working correctly on desktop incorrectly cutting the background image off

.navoutline {
 border: 2px solid black; 
 background-image: url('../img/rainbow.jpg');
 background-size: cover;
 background-repeat: no-repeat;
 width: 90%;
 padding-top: 10px;
 padding-bottom: 10px;
}

.bodyoutline {
  border: 2px solid black;
  background-image: url('../img/rainbow.jpg');
  background-size: cover;
  background-repeat: no-repeat; 
  width: 90%;
  padding-top: 10px;
  padding-bottom: 10px;
}

despite being IDENTICAL, they are yielding 2 different results on IOS. navoutline is displaying correctly, bodyoutline is not.