CSS Causing Website To Crash On Mobile Device?-CodePudding

I'm new to web design and have managed to create a simple website that I'm currently testing to see how it runs. I have no problems getting it to run on a computer but when I test it on a mobile device it often crashes. I've noticed that it runs well on most mobile web browsers except for Google Chrome.

After doing some research I've found many people talking about how they had trouble getting their websites to run based on the CSS they had used. I've tried fiddling around with my code to see if I can isolate the issue but have been unable to find the solution.

Could the mobile Google Chrome issue have anything to do with the -webkit-transform: script that I used? Could the issue have arisen from the display: block or display: none script that I used? Any knowledge that one could share would be very much appreciated.

<!DOCTYPE html>
<html lang="en">  
    
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
    
<body>
    
<style>html{visibility: hidden; opacity: 0;}</style>
    
<title>MORIKOBOSHI・</title>
      
<div >
     
<div >
<input id="cp_toggle03" type="checkbox"/>
<div >
<label for="cp_toggle03" >
<span></span>
</label>
</div>
<label id="h-menu_black"  for="cp_menuicon"></label>
<div id="body" ></div>
        
<header >
        
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
            
<li style="border-bottom: .05px solid lightgray;"><a href="#">Home</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">Blog</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">About This Website</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">Bibliography</a></li>
    
            
<div > 
            
<form id="frmSearch"  method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input  id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input  type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50px; display: inline-flex; justify-content: center;">
<input  type="hidden" name="sitesearch" value="default.html">    

</form>
</div>    

    
<script type="text/javascript">
 document.getElementById('frmSearch').onsubmit = function() {
 window.location = 'http://www.google.com/search?q=site:morikoboshi.com'   document.getElementById('txtSearch').value;
        return false;
    }
 
</script>


<script>
 document.getElementById('cp_toggle03').onchange = function() {
 if (document.getElementById('cp_toggle03').checked) {
 document.body.style.overflow = "hidden";
  } else {
 document.body.style.overflow = "";
  }
} 

</script>

</ul>    
</nav>
</header>     
               
<div >
    
 <br><br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
    <br><p style="text-align: justify; font-size: 16px;"></p>
    
 <p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
 <p style="text-align: center; font-size: 13px;">Photos/Videos Taken：◯◯◯◯/◯◯/◯◯</p>
    
 <br><br><p style="text-align: justify; font-size: 16px;">    
    
    #
 </p>    
        
</div>
        
<br><br><div >
    
  <a href="#"><img src="#" alt="#" width="90%"></a>
 
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
 
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>

 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>

 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
</div>
    
<br><br><footer  style="font-size: 12px;">MORIKOBOSHI© | <a href="#">日本語</a></footer>

</div>
</div>
      
<style>
    
html {visibility: visible;
      opacity: 1;}
    
.body{background-color: white;
      font-family: sans-serif;}
    
 .searchbar{float: right;}
    
 .image{text-align: center;}
    
 .setsumei{margin-left: 20px;
           margin-right: 20px;}
    
 .footer{width: 100%; 
           height: 40px; 
           text-align: center;
           border-top: 1px solid black; 
           position: absolute;
           bottom: 0;
           padding: 10px;}
    
 .page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -40px; 
}

 .page-wrap:after {
  content: "";
  display: block; 
  }

 .site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 20px; 
}

 .site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}
        

 *, *:before, *:after {
    padding-left: 0;
    margin: 0;
    box-sizing: border-box;
    
}    

 ol, ul {
    list-style: none;
}

 a {
    text-decoration: none;
    color: black;
}
    
 .cp_cont {
    height: auto;
}
    
/* menu */
 .cp_offcm03 {
    position: relative;
    z-index: 5000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;
    height: auto;
    padding-top: 0;
    -webkit-transition: transform 0.3s ease-in;
            transition: transform 0.3s ease-in;
    text-align: center;
    color: black;
    background-color: white;
}
 .cp_offcm03 nav,
 .cp_offcm03 ul {
    height: 100%;
}

 .cp_offcm03 li {
    display: inline-block;
    margin-right: -6px;
}

 .cp_offcm03 a {
    display: block;    
    padding: 15px 45px;
    margin-bottom: -5px;
    -webkit-transition: background-color .3s ease-in;
            transition: background-color .3s ease-in;
}
    
 .cp_offcm03 a:hover {
    background-color: lightgray;
}

/* menu toggle */
 #cp_toggle03 {
    display: none;
}

 #cp_toggle03:checked ~ .cp_offcm03 {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 #cp_toggle03:checked ~ .cp_container {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 .cp_mobilebar {
    display: none;
    
}

/* content */
 .cp_container {
    position: relative;
    top: 0;
    padding: 35px auto;
    -webkit-transition: transform .3s ease-in;
            transition: transform .3s ease-in;
}   

 .cp_content {
    margin: 0 auto;
    padding: 20px;
    height: 65vh;
    text-align: center;

}

@media (max-width: 1130px)and (min-width: 280px) {
/* menu */
 .cp_offcm03 {
        position: fixed;
        left: -250px;
        overflow-y: hidden;
        width: 250px;
        height: 100%;
        padding-top: 40px;
        color: black;
        background-color: white;
        z-index: 1000;
    }
    
    
 .cp_offcm03 nav {
        background: white;
        border-right: 0.5px solid lightgray;
        margin-left: -210px;
    }
    
    
    
 .cp_offcm03 li {
        display: block;
        margin-right: 0;}

        
        
 .cp_offcm03 a {
        padding: 20px;
        
    }
    
/* menu toggle */
 .cp_mobilebar {
        display: block;
        z-index: 2000;
        position: relative;
        top: 0;
        left: 0;
        padding: 0 25px;
        width: 100%;
        height: 40px;
        background-color: white;
        border-bottom: .05px solid lightgray;
        
        
    }
    
 .cp_menuicon {
        display: block;
        position: relative;
        width: 25px;
        height: 100%;
        cursor: pointer;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
 .cp_menuicon > span {
        display: block;
        position: absolute;
        top: 55%;
        margin-top: -0.3em;
        width: 100%;
        height: 0.2em;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease;
                transition: transform .3s ease;
    }
 .cp_menuicon > span:before,
 .cp_menuicon > span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
    
 .cp_menuicon > span:before {
        -webkit-transform: translateY(-0.6em);
                transform: translateY(-0.6em);
    }
 
 .cp_menuicon > span:after {
        -webkit-transform: translateY(0.6em);
                transform: translateY(0.6em);
    }

 #cp_toggle03:checked   .cp_mobilebar .cp_menuicon { 
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    
 #cp_toggle03:checked   .cp_mobilebar span:before,
 #cp_toggle03:checked   .cp_mobilebar span:after {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
    
 #cp_toggle03:checked ~ .cp_offcm03 {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
    
 #cp_toggle03:checked ~ .cp_container {
        -webkit-transform: translateX(250px);
                transform: translateX(250px);
    }
    
 input:checked ~ #h-menu_black {
    display: block;/*カバーを表示*/
    opacity: .6;
}
    
 #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
}
    
/* content */
 .cp_container {
        top: 60px;
        height: 92vh;
        text-align: center; 
    } 
    
 .noscroll{
        overflow: hidden;
        position: fixed;
    }
    
</style> 
      
</body>
</html>

CodePudding user response：

I would like to thank everyone for their help in trying to solve this issue.

After deleting bits of CSS to see how my website runs without it I found the solution. It was indeed the html { visibility: hidden; opacity: 0; } line of code that was preventing my website from running smoothly on the mobile version of Google Chrome. Getting rid of this line of code stopped my website from freezing.