Troubleshooting Browser Window Disappearance on Mobile

HTML & CSS
1

When scrolling up, the browser window disappears even though the content is centered in the middle. This behavior is unexpected as centering content should not cause the browser window to disappear when scrolling up on a mobile phone.

When I scroll up the browser window disappears.

Even though this is centered in the middle.

How do I fix that?

Viewed in debug mode inside codepen I am seeing a scroll bar.

Right and bottom.

https://jsfiddle.net/px5ahsy4/1/

You can see right and bottom scroll bars:

293×572 6.65 KB

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 0 8px 0;
}


.outer-containerB {
  display: flex;
  min-height: 100vh;
}

.containerB,
.containerC {
  margin: auto;
}


.containerC {
  background: none;

  /*
  teal */
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
}

.blue-margin-bottom {
  margin-bottom: 16px;
  background: none;
}

.orange-margin {
  margin-left: 12px;
  margin-right: 12px;
  background: none;
}

.title-text {
  margin: 0;
  color: #0059dd;
  font-size: 20px;
  line-height: 1.5;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.yellow-padding-margin {
  margin-top: 4px;
  padding-left: 40px;
  padding-right: 40px;
  background: none;
}

.center-text {
  padding: 0;
  margin: 0;
  text-align: center;
  color: #0059dd;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: normal;
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-style: normal;
  background: none;
}

.exitE {
  position: relative;
  margin: 6px auto 0;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: black;
  border-radius: 50%;
  border: 5px solid #0059dd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.exitE::before,
.exitE::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: #0059dd;
  transform: rotate(45deg);
}

.exitE::after {
  transform: rotate(-45deg);
}

.my-footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  text-align: center;
  word-wrap: break-word;
  padding: 22px 8px 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 13.33px;
  line-height: 1.5;
  vertical-align: baseline;
  margin-top: auto;
}

.margin-top {
  margin-top: 10px;
}

.my-footer a {
  text-decoration: none;
}

.divider::before,
.divider::after {
  content: "";
  position: relative;
  top: 4px;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 13px;
  padding: 0;
  list-style: none;
}

.footer-top li {
  display: flex;
}

.footer-top a {
  color: #0059dd;
  font-weight: 700;
}

.my-footer .green-text {
  color: #38761d;
  font-weight: 400;
}

.orange-text {
  color: #b45f06;
  font-weight: 700;
}

.footer-mid {
  margin-bottom: 49px;
  color: #0059dd;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.footer-base {
  color: #0059dd;
  padding: 0;
}

html:

<div class="outer-containerB hide">

<div class="containerC hide">
	<div class="inner-container ">
		<div class="flex">
			<div class="blue-margin-bottom">
				<svg width="136" height="136" viewBox="0 0 136 136">
					<rect x="0" y="0" width="136" height="136" fill="#0059dd" />
					<rect x="4" y="4" width="128" height="128" fill="black" />
					<rect x="8" y="8" width="120" height="120" fill="#0059dd" />
					<rect x="12" y="12" width="112" height="112" fill="black" />
					<rect x="16" y="16" width="104" height="104" fill="#0059dd" />
					<rect x="20" y="20" width="96" height="96" fill="black" />
					<rect x="24" y="24" width="88" height="88" fill="#0059dd" />
					<rect x="28" y="28" width="80" height="80" fill="black" />
					<rect x="32" y="32" width="72" height="72" fill="#0059dd" />
					<rect x="36" y="36" width="64" height="64" fill="black" />
					<rect x="40" y="40" width="56" height="56" fill="#0059dd" />
					<rect x="44" y="44" width="48" height="48" fill="black" />
					<rect x="48" y="48" width="40" height="40" fill="#0059dd" />
					<rect x="52" y="52" width="32" height="32" fill="black" />
					<rect x="56" y="56" width="24" height="24" fill="#0059dd" />
					<rect x="60" y="60" width="16" height="16" fill="black" />
					<rect x="64" y="64" width="8" height="8" fill="#0059dd" />
				</svg>
			</div>
			<div class="orange-margin">
				<h1 class="title-text">text</h1>
			</div>
			<div class="yellow-padding-margin">
				<h2 class="center-text">text</h2>
			</div>
		</div>
		<button class="exitE" type="button" title="Exit" aria-label="Exit"></button>
		<footer class="margin-top my-footer">
			<ul class="footer-top">
				<li><a href="#" target="_blank">text</a></li>
				<li class="divider"><a href="#" target="_blank">text</a></li>
				<li><a href="#"
						target="_blank"><span class="green-text">text</span><span class="orange-text">text</span></a>
				</li>
			</ul>
			<div class="footer-mid">text</div>
			<div class="footer-base">text</div>
		</footer>
	</div>
</div>
</div>
2

Nothing disappears on my phone.

You can always scroll a phone further than its dimensions because usually there’s a bounce allowance which is either used to refresh the page or to see what’s underneath even when there’s nothing. That’s normal behaviour on phones.

You have extra scrollbars for two reasons.

The vertical scrollbars are showing because of the height:100vh includes any of the browsers bars that appear at top and bottom during scrolling. The 100vh is the full viewport height but there may be overlays by the browser so the page needs scrollbars or the content is hidden.

This is an age old problem with mobile and the reason why the vh unit was badly thought out. Indeed the old hack of multiple height:100% back to root is more reliable but not always possible.

There is a new dynamic unit (now well supported) called dvh (dynamic viewport height) and caters for the largest height or the smallest height when the browser overlays its toolbars. It does come at a cost though and there will be a jump in content size when the page scrolls.

You can see it explained in this video.

The second problem I see with your code is that you don’t seem to have used the viewport meta tag so the width of the page will be whatever the browsers uses as there best guess and then scales the page down to fit.

1 Like
3

If I remove: min-height: 100vh;

The right scrollbar goes away.

But then it is not centered in the middle.

What if I replaced it with this?

position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;

or:

.outer-containerB {
 display: flex;
 position: fixed;
 inset:0 0 0 0;
 overflow: auto;
}

That removes right scrollbar and works.

This was in my github, not fiddle or codepen:
<meta name="viewport" content="width=device-width,initial-scale=1.0">

Looking at the CSS:

There is no issue with .outer-containerA {

It is only .outer-containerB {

Where I am having this issue.

.outer-containerA {
  display: flex;
  position: fixed;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  /* Enable scroll if needed */
  margin: auto;
  background: #181d38;
}

.outer-containerB {
  display: flex;
  min-height: 100vh;
}

And there is no issue with modal:

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  /*background: rgba(0, 0, 0, 0.4);*/
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transform: translate(0, -25%);
  opacity: 0;
  pointer-events: none;
  z-index: -99;
  overflow: auto;
  border-radius: 50%;
  --units: 8px;
  --brick1: #222;
  --brick2: #222;
  --lines: #121212;
  --gp-ln: 50%/calc(var(--units) * 10) calc(var(--units) * 5);
  --gp-cn: 50%/calc(var(--units) * 5) calc(var(--units) * 5);
  background:
    repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn),
    repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100%) var(--gp-ln),
    repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100%) var(--gp-ln);
}

.modal.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: auto;
  padding: 8px 8px;
}

.inner-modal {
  position: relative;
  margin: auto;
}

Scroll bar desktop view:

234×720 10.5 KB

Full CSS

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 0 8px 0;
}

body:has(.modal.active) {
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.outer-containerA {
  display: flex;
  position: fixed;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  /* Enable scroll if needed */
  margin: auto;
  background: #181d38;
}

.video-containerA,
.video-containerB,
.video-containerC {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  position: relative;
}

.ratio-keeper {
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  position: relative;
  background: #000;
}

.ratio-keeper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.curtain {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;

  --wide: 8.8%;
  --angle1: 0;
  --angle2: -90;
  background: repeating-linear-gradient(calc(var(--angle1) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px)),
    repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg),
      #ffffff00 0,
      #ffffff00 var(--wide),
      #ffffff1a calc(var(--wide) + 1px),
      #0000004d calc(var(--wide) + 2px),
      #ffffff00 calc(var(--wide) + 5px));
  background-color: #222;
  border-bottom: 2px solid #191919;
  background-repeat: no-repeat;
  overflow: hidden;
  transform: translateY(0%);
  transition: 0.2s;
}

.video-containerA.slide .curtain {
  transition: 8s;
  transition-delay: 700ms;
  transform: translateY(-100%);
}

@keyframes slide {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.video-containerB.slide .curtain,
.video-containerC.slide .curtain {
  animation: slide 8s forwards;
  animation-delay: 700ms;
}

.outer-containerB {
  display: flex;
  min-height: 100vh;
}

.containerB,
.containerC {
  margin: auto;
}

.buttonContainerA,
.buttonContainerB {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 569px;
  gap: 10px;
}

.playButton,
.linkButton {
  flex-basis: 183px;

  /* 
  width of each button */
  margin: 0;

  /* 
  spacing between buttons */
  cursor: pointer;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  /*background: rgba(0, 0, 0, 0.4);*/
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transform: translate(0, -25%);
  opacity: 0;
  pointer-events: none;
  z-index: -99;
  overflow: auto;
  border-radius: 50%;
  --units: 8px;
  --brick1: #222;
  --brick2: #222;
  --lines: #121212;
  --gp-ln: 50%/calc(var(--units) * 10) calc(var(--units) * 5);
  --gp-cn: 50%/calc(var(--units) * 5) calc(var(--units) * 5);
  background:
    repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn),
    repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100%) var(--gp-ln),
    repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100%) var(--gp-ln);
}

.modal.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: auto;
  padding: 8px 8px;
}

.inner-modal {
  position: relative;
  margin: auto;
}

.btnA-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btnA,
.btnB {
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #0d6efd;
  border: 1px solid transparent;
  box-sizing: border-box;
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 4px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.btnA:hover {
  background-color: #0056b3;
  border-color: #0a58ca;
  color: #ffffff;
}

.played {
  border-color: #0a58ca;
  background-color: #0056b3;
  box-shadow: 0 0 0 2px rgb(255 0 0);
}

.btnB-primary {
  color: #2fdcfe;
  background-color: #000000;
  border-color: #2fdcfe;
}

.btnB {
  border: 1px solid #2fdcfe;
}

.btnB:hover {
  background-color: #121212;
}

/*.btnA:focus,*/
.btnB:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(47 254 185 / 100%);
}

.exitA,
.exitB,
.exitC {
  transform: translateY(100%);
  position: absolute;
  inset: auto 0 -6px 0;
  /*top: auto;
  bottom: -6px;*/
  margin: auto;
  /*8right: 0;
  left: 0;*/
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 3s ease-in;
  transition-delay: 1s;
  pointer-events: none;
}

.exitA::before,
.exitA::after,
.exitB::before,
.exitB::after,
.exitC::before,
.exitC::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.exitA::after,
.exitB::after,
.exitC::after {
  transform: rotate(-45deg);
}

.exitA.visible,
.exitB.visible,
.exitC.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.exitD,
.close {
  position: absolute;
  margin: 6px auto 0;
  left: 0;
  right: 0;
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.exitD::before,
.exitD::after,
.close::before,
.close::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

.exitD::after,
.close::after {
  transform: rotate(-45deg);
}

.containerC {
  margin: auto;
  background: none;

  /*
  teal */
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
}

.blue-margin-bottom {
  margin-bottom: 16px;
  background: none;
}

.orange-margin {
  margin-left: 12px;
  margin-right: 12px;
  background: none;
}

.title-text {
  margin: 0;
  color: #0059dd;
  font-size: 20px;
  line-height: 1.5;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.yellow-padding-margin {
  margin-top: 4px;
  padding-left: 40px;
  padding-right: 40px;
  background: none;
}

.center-text {
  padding: 0;
  margin: 0;
  text-align: center;
  color: #0059dd;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: normal;
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-style: normal;
  background: none;
}

.exitE {
  position: relative;
  margin: 7px auto 0;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: black;
  border-radius: 50%;
  border: 5px solid #0059dd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.exitE::before,
.exitE::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: #0059dd;
  transform: rotate(45deg);
}

.exitE::after {
  transform: rotate(-45deg);
}

.my-footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  text-align: center;
  word-wrap: break-word;
  padding: 22px 8px 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 13.33px;
  line-height: 1.5;
  vertical-align: baseline;
  margin-top: auto;
}

.margin-top {
  margin-top: 10px;
}

.my-footer a {
  text-decoration: none;
}

.divider::before,
.divider::after {
  content: "";
  position: relative;
  top: 4px;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 13px;
  padding: 0;
  list-style: none;
}

.footer-top li {
  display: flex;
}

.footer-top a {
  color: #0059dd;
  font-weight: 700;
}

.my-footer .green-text {
  color: #38761d;
  font-weight: 400;
}

.orange-text {
  color: #b45f06;
  font-weight: 700;
}

.footer-mid {
  margin-bottom: 49px;
  color: #0059dd;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.footer-base {
  color: #0059dd;
  padding: 0;
}

.outer-containerA.hide,
.video-containerA.hide,
.video-containerB.hide,
.video-containerC.hide,
.outer-containerB.hide,
.containerB.hide,
.containerC.hide {
  display: none;
}
4

That works because its fixed positioned and there is no 100% height and does not take part in the body scrollbars but uses its own scrollbars. That’s not an issue if there is nothing else that you want to scroll to.

1 Like
5

And so, I can do this now:

.outer-containerA {
  background: #181d38;;
}

.outer-containerA,
.outer-containerB,
.modal {
  display: flex;
  position: fixed;
  inset: 0;
  overflow: auto;
  /* Enable scroll if needed */
}
1 Like