When i open a modal on mobile, the font-size gets bigger

Question

i have this strange problem. I made this modal to work as a full screen about page. It doesn't make any problem on desktop, however when i press it on mobile, the modal itself looks okay but then i remove it and some fonts become bigger.

I linked the run snippet so you can check it for yourself, however it's a mobile only problem. You can check it on my website page: www.giacomofagandini.com

I'm not that good with js so i only tried adding/removing classes to see where the problem could be. Thanks in advance

const showDialog = () => {
  document.getElementById('dialog').classList.add('show');
};
const closeDialog = () => {
  document.getElementById('dialog').classList.remove('show');
};

*{margin: 0px; padding: 0px;}
html{font-size: 16px !important;}
ul, ol{ list-style: none;}
a, li{text-decoration: none !important;}
a img{border:none !important;}
body{font-family: Arial, Helvetica, sans-serif; font-size: 1em;}
header, footer, section, article, figure, aside, video, audio, hgroup, nav{display: block;}
.clear{clear: both;}
.left{float: left;}
.right{float: right;}
.block{display: block}

a { color: inherit; }

.works a{color: white;}
.intro-bottom a:hover{color: white;text-decoration: underline;}
.work-bottom a:hover{color: white;text-decoration: underline;}
.underline{text-decoration: underline !important;}


.modal-wrapper{
  width: 96vw;
  margin: 0 auto;
  position: relative;

}



html{
  background-color: #1c1c1c;
  overflow-y: scroll;
  overflow-x: hidden;
}

body{
  background-color: #1c1c1c;
  font-family:"AT Surt Extended";
  color: white;
}

nav{
  position: fixed;
  top: 2vw;
  width: 96vw;
  height: 25px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 997;
}

.about-nav{
  position: fixed;
  top: 2vw;
  width: 96vw;
  height: 25px;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
}

.logo{
  height: 100%;
}

.height-100{
  height: 100%;
}

#show {
  /* height: 100%; */
  cursor: pointer;
  /* padding: 0; */
}
#show,
#close {
  /* display: block; */
  /* height: 100%; */
  cursor: pointer;
}
#dialog {
  display: none;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 998;
  background-color: #1c1c1c;
  color: #fff;
}
#dialog.show {
  display: block;
}




/* INTRO CSS */

.wrapper{
  width: 96vw;
  margin: 0 auto;
  position: relative;
}


.noscroll{overflow: hidden;}
.sub-title{margin-bottom: 4.2vh;}


h1{font-weight: 100; font-size: 53px; line-height: 1.2em; display: inline-block;}
h2{font-weight: 100; font-size: 36.8px; line-height: 1.4em;}
h3{font-weight: 100; font-size: 25.6px; line-height: 1.4em;}
h4{font-weight: 100; font-size: 16px; }
.bold{font-weight: 300;}
.grey{color: #737373;}

.intro-wrapper{
  min-height: 100vh;
  box-sizing: border-box;
  display: block;
  margin-bottom: 8vh;
  position: relative;
  background-color: red;
}



.intro{
  padding-top: 31.5vh;
  min-height: 68.5vh;
}


.flex-intro{
  display: flex;
  flex-wrap: wrap;
}

.pres1{
  width: 63%;
  margin-right: 3%;
  min-width: 690px;
  max-width: 1200px
}
.pres2{
  min-width: 300px;
  width: 29%;
  height: 100%;
}

.intro-bottom{
  width: 100%;
  position: absolute;
  bottom: 1.5vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}



.intro-bottom ul{
  width: 48.9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 100;
  line-height: 1.3em;
}
.intro-bottom ul li{
  width: 30%;
  display: inline-block;
  font-size: 16px;
}
.intro-arrow{
  width: 45px;
  border-left: 1.5px solid white;
  border-right: 1.5px solid white;
  height: 100px;
  writing-mode: vertical-rl;
  overflow-y: hidden;
  overflow-x: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-bottom ul li:nth-child(4),
.intro-bottom ul li:nth-child(5)
{
  display: none;
}


/* ////////WORKS SECTION////// */

.works{
  padding-top: 8vh;
  padding-bottom: 8vh;
  box-sizing: border-box;
  border-top: 1.5px solid #737373;
  border-bottom: 1.5px solid #737373;
  display: block;
}

.works-items{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.flex-item{
  margin-bottom: 2.15%;
}


.flex-item:nth-child(1),
.flex-item:nth-child(3),
.flex-item:nth-child(4),
.flex-item:nth-child(6){
  margin-right: 2.15%;
}


.w12{
  width: 100%;
}

.w6{
  width: 48.925%;
}

.w5{
  width: 40.4%;
}

.w4{
  width: 31.9%;
}

.w3{
  width: 23.3%;
}

.works-img{
  width: 100%;
  height: 27vw;
  background-color: white;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 4;
  opacity: 0;
}

.flex-item:hover .overlay{
  opacity: 0.5;
  transition: 0.2s;
}

.title-work{
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  box-sizing: border-box;
  padding-top: 10px;
  margin-bottom: 10px;
}

.work-section{
  width: 100%;
}

/* /////////////////// */

/* ////////   FOOTER  /////////// */
.footer-wrapper{
  min-height: 100vh;
  box-sizing: border-box;
  display: block;
  position: relative;
}

.info{
  position: relative;
  width: 100%;
  padding-top: 30vh;
  display: flex;
  flex-wrap: wrap;
}
.info section:nth-child(1) {
  padding-right: 11%;
  margin-bottom: 50px;
}

.info section:nth-child(2) {
  padding-bottom: 20vh;
}



/* INTRO ABOUT */

.about-intro{
  position: fixed;
  padding-top: 31.5vh;
  min-height: 100vh;
  width: 95%;
  box-sizing: border-box;
}

.about-intro-bottom{
  width: calc(100% + 2.387%);
  position: absolute;
  bottom: 1.5vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 999;
}

.about-intro-bottom ul{
  width: 48.9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 100;
  line-height: 1.3em;
}
.about-intro-bottom ul li{
  width: 30%;
  display: inline-block;
}



.about-content{
  position: relative;
  padding-top: 40vh;
  width: 51%;
  left: 42.5%;
  padding-bottom: 1.5vw;
}

.about-content h3{
  margin-bottom: 9.1vh;
  line-height: 1.3em; */
}

.about-content h4{
  /* padding-bottom: 3.5vh; */
  font-weight: 100;
  line-height: 1.3em;
}


/*
font-weight: 100;
line-height: 1.3em; */

.about-content-img-container{
  width: 100%;
  height: 897px;
  padding-top: 9.1vh;
  margin-top: 9.1vh;
  padding-bottom: 9.1vh;
  margin-bottom: 9.1vh;
  border-top: 1.5px solid #737373;
  border-bottom: 1.5px solid #737373;
}

.about-content-img{
  width: 100%;
  height: 100%;
  background-color: white;
}

.about-height{
  position: relative;
  max-height: 1920px;
}


/* WORK TABS */

.work-info{
  padding-top: 31.5vh;
  padding-bottom: 31.5vh;
  display: flex;
  wrap: nowrap;
}
.work-intro{
  margin-right: 19.2%;
}
.work-intro ul{
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-weight: 100;
  line-height: 1.3em;
  padding-top: 4.5vh;
}
.work-intro ul li{
  width: 42.1%;
  display: inline-block;
}
.work-intro ul li:nth-child(3){width: 15.8%;}
.work-description{padding-top: 6.5vh;}



.work-grid{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 30vh;
  border-bottom: 1.5px solid #737373;
  margin-bottom: 10.2vh;
}

.work-grid > section {
  line-height: 0;
  margin-bottom: 2.15%;
  height: 500px;
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;

}

.work-bottom{
  width: 100%;
  padding-bottom: 3.5vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.work-bottom ul{
  width: 48.9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 100;
  line-height: 1.3em;
}
.work-bottom ul li{
  width: 30%;
  display: inline-block;
  font-size: 16px;
}



.next-prev-project{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20vh;
}

.left-arrow{
  width: 15.7%;
  height: 80%;
  margin-right: 5.3%;
  border-top: 1.5px solid white;
  border-bottom: 1.5px solid white;
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-arrow{
  width: 15.7%;
  height: 80%;
  margin-left: 5.3%;
  border-top: 1.5px solid white;
  border-bottom: 1.5px solid white;
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-project{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.next-prev-project h4{
  margin-bottom: 1vh;
}
.next-prev-project > section{
    width: 40.4%;
    display: flex;
    flex-wrap: wrap;
  }


.img-responsive {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    /* transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0,-50%); */
}


/* Schermi inferiori di 1175 -> Tablet Grossi */

@media screen and (max-width: 1175px) {
  body {
  }

  .sub-title{margin-bottom: 20px;}

  .wrapper{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .modal-wrapper{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  nav{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    top: 20px;
    box-sizing: border-box;
  }

  .about-nav{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    top: 20px;
    box-sizing: border-box;
  }

  .about-content{padding-top: 38vh;}


  h1{font-weight: 100; font-size: 46.4px; line-height: 1.2em; display: inline-block;}
  h2{font-weight: 100; font-size: 33.6px; line-height: 1.4em;}
  h3{font-weight: 100; font-size: 20.8px; line-height: 1.35em;}
  h4{font-weight: 100; font-size: 16px; }
  .pres2{min-width: 600px; max-width: 600px;}
  .flex-item{
    margin-bottom: 40px;
  }
  .pres1{padding-bottom: 30px; width: 80%; max-width: 690px;}
  {padding-top: 25.5vh;}
  -bottom{bottom: 20px;}
  .w3{width: calc(50% - 10px);}
  .w4{width: calc(50% - 10px);}
  .w5{width: calc(50% - 10px);}
  .w6{width: calc(50% - 10px);}
  -bottom ul{width: 70%;}

  .flex-item:nth-child(odd){margin-right: 20px;}
  .flex-item:nth-child(even){margin-right: 0;}

}

/* ABOUT BREAKPOINT */
@media screen and (max-width: 1040px) {
  .about-intro{position: relative; min-height: 20vh; margin-bottom: 50px;}
  .about-intro ul{display: none;}
  .about-content{left: 0; padding-top: 0; width: 100%;}

}


@media screen and (max-width: 768px) {
  html{
    overflow-x: hidden !important;
  }
  body{
  }

  h1{font-weight: 100; font-size: 44.8px; line-height: 1.2em; display: inline-block;}
  h2{font-weight: 100; font-size: 32px; line-height: 1.4em;}
  h3{font-weight: 100; font-size: 20.8px; line-height: 1.35em;}
  h4{font-weight: 100; font-size: 16px; }
  .intro-arrow{display: none;}
  .pres1{max-width: 690px; min-width: 500px;}
  .pres2{min-width: 400px; max-width: 700px; margin-bottom: 0;}
  .intro{padding-top: 20vh;}
  .w3{width: 100%;}
  .w4{width: 100%;}
  .w5{width: 100%;}
  .w6{width: 100%;}
  .flex-item{margin-right: 0;}
  .works-img{height: 400px;}
  .intro-bottom ul{width: 90%;}
}

  @media screen and (max-width: 500px) {
    html{overflow-x: hidden !important;}

    h1{font-weight: 100; font-size: 30.4px !important; line-height: 1.2em; display: inline-block;}
    h2{font-weight: 100; font-size: 22.4px !important; line-height: 1.4em;}
    h3{font-weight: 100; font-size: 18px !important; line-height: 1.35em;}
    h4{font-weight: 100; font-size: 12.8px !important; }
    .intro
    .pres1{max-width: 310px; min-width: 200px; width: 100%;}
    .pres2{max-width: 90%; width: 100%; min-width: 90%;}
    .intro-arrow{display: none;}
    .intro-bottom{bottom: 91px;}
    .footer-wrapper .intro-bottom{bottom: 20px;
    }
    .w3{width: 100%;}
    .w4{width: 100%;}
    .w5{width: 100%;}
    .w6{width: 100%;}
    .flex-item{margin-right: 0;}
    .works-img{height: 400px;}
    .intro-bottom ul li{
      width: 50%;
    }
    .intro-bottom ul li:nth-child(1),
    .intro-bottom ul li:nth-child(2),
    .intro-bottom ul li:nth-child(3)
    {display: none;}

    .intro-bottom ul li:nth-child(4),
    .intro-bottom ul li:nth-child(5)
    {display: block;}

    .intro-wrapper{margin-bottom: 0; padding-bottom: 0;}
    .works{padding-top: 20px;}
    .footer-wrapper{
      display: flex;
      align-items: center;
      height: 100vh;
    }
    .info{
      padding-top: 0;
    }
    .info section:nth-child(2) {
      padding-bottom: 0;
    }


}

  <nav>
    <div class="logo">
      <a href="#">
        <svg class="logo-svg" height="100%" xmlns="http://www.w3.org/2000/svg" data-name="Livello 1" viewBox="0 0 790 700"><defs><style>  .cls-1{fill:#ffffff;}</style></defs><title>  Logo Giacomo Fagandini [Recuperato]</title><polygon class="cls-1" points="212.8 60.6 0 144.5 0 183.9 0 183.9 0.1 650.2 0 650.3 0 689.7 0.1 689.7 0.1 689.7 153.9 629.1 153.9 629 366.6 545.2 366.6 538.3 366.6 505.8 366.6 308.1 366.6 308.1 366.6 308.1 233.9 360.4 212.8 368.7 212.8 368.7 183.3 380.3 183.3 419.7 212.8 408.1 212.8 566.4 153.9 589.6 153.9 123.3 212.8 100 212.8 236 366.6 175.4 366.6 39.4 366.6 0 212.8 60.6 212.8 60.6"/><polygon class="cls-1" points="775.2 144.5 775.1 144.5 775.1 144.2 621.4 83.6 621.4 83.9 562.4 60.6 562.4 60.6 408.7 0 408.7 39.4 408.7 538.3 562.4 599 562.4 408.9 775.1 492.7 775.1 453.3 562.4 369.5 562.4 100 621.4 123.3 621.4 247.4 775.1 308.1 775.1 183.9 775.2 183.9 775.2 144.5"/></svg></a>
    </div>
    <section id='show' class="height-100" onClick='showDialog()'>
        <img height="85%" src="./assets/img/info-button.svg">
    </section>
  </nav>
  <div id='dialog'>
      <section class="about-nav">
        <svg id='close' class="height-100" onClick='closeDialog()' height="100%" xmlns="http://www.w3.org/2000/svg" data-name="Livello 1" viewBox="0 0 790 700"><defs><style>  .cls-1{fill:#ffffff;}</style></defs><title>  Logo Giacomo Fagandini [Recuperato]</title><polygon class="cls-1" points="212.8 60.6 0 144.5 0 183.9 0 183.9 0.1 650.2 0 650.3 0 689.7 0.1 689.7 0.1 689.7 153.9 629.1 153.9 629 366.6 545.2 366.6 538.3 366.6 505.8 366.6 308.1 366.6 308.1 366.6 308.1 233.9 360.4 212.8 368.7 212.8 368.7 183.3 380.3 183.3 419.7 212.8 408.1 212.8 566.4 153.9 589.6 153.9 123.3 212.8 100 212.8 236 366.6 175.4 366.6 39.4 366.6 0 212.8 60.6 212.8 60.6"/><polygon class="cls-1" points="775.2 144.5 775.1 144.5 775.1 144.2 621.4 83.6 621.4 83.9 562.4 60.6 562.4 60.6 408.7 0 408.7 39.4 408.7 538.3 562.4 599 562.4 408.9 775.1 492.7 775.1 453.3 562.4 369.5 562.4 100 621.4 123.3 621.4 247.4 775.1 308.1 775.1 183.9 775.2 183.9 775.2 144.5"/></svg>
        <section id='close' class="height-100" onClick='closeDialog()'><img height="85%" src="./assets/img/info-button.svg"></section>
      </section>
      <section class="modal-wrapper">
        <section class="about-intro">
          <h4 class="grey sub-title">ABOUT ME</h4>
          <h1><span class="bold">Since you asked</span><br>(Did you?)</h1>
          <section class="about-intro-bottom">
            <ul class="grey">
              <li>Giacomo<br>Fagandini</li>
              <li>2020<br>Portfolio</li>
              <li></li>
            </ul>
          </section>
        </section>
        <section class="about-content">
          <h3>I'm Giacomo, a designer living in Parma & actually open for new opportunities. If you can get past my cynical humor and my "not-so pass the aux" musical taste i can be a pretty good person to have around. Previously i've worked at Saatchi & Saatchi as an Art Director Intern, i graduated in Graphic Design at NABA and i like closing my sentences in a questionable way.</h3>
          <section class="about-content-img-container">
            <section class=about-content-img></section>
          </section>
          <h3>[email protected]<br><a class="underline" href="http://www.behance.net/giacomofagandini" target="_blank">Behance</a> – <a class="underline" href="http://www.instagram.com/giacomofagandini" target="_blank">Instagram</a> – <a class="underline" href="https://www.linkedin.com/in/giacomo-fagandini/" target="_blank">Linkedin</a></h3>
          <h4 class="grey">Site made from scratch and typeset in Surt.<br>All work © Giacomo Fagandini 2020  Infinity and beyond.</h4>
        </section>
      </section>
    </div>

Answer 1

Don't give

Position: fixed;

to modal when opening on mobile.

Position: fixed; creates an issue on IOS devices.

I hope this will fix your problem.