I'm encountering an issue in my Angular application where, specifically on mobile devices, the footer and header jump down by 105px when opening the sidebar menu. You can observe this behavior by accessing the app here. Interestingly, I have been unable to replicate this problem in Chrome on desktop.
To reproduce the issue, please use the following credentials and navigate to any channel before pulling out the sidebar menu:
username: [email protected] password: test
index.html:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Slackchat</title>
<meta name="description" content="">
... (remaining code here)
</body>
</html>
messages.html
<div class="ui padded grid">
... (content omitted for brevity)
</div>
<!-- SEMANTIC MODAL DROPDOWN -->
<script>
$('.dropdown').dropdown({
// you can use any ui transition
transition: 'drop'
});
</script>
main.css
body {
padding: 0;
background: #eef2f5;
}
... (remaining CSS styles included as-is)