我目前仅在Firefox Android中遇到显示问题。 我在台式机和Android Chrome上都没有问题。
我正在使用Angular 8和mat-toolbar。 我想使用底部的导航栏，但是这个闪烁的问题使它看起来很糟糕。 只有当我快速向上/向下滚动时。
我使用的代码非常简单：
<div class="container">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut neque ipsum. Proin dolor ipsum, mattis non suscipit eget, condimentum id mauris. Vestibulum orci lectus, pretium et dictum ut, efficitur eget augue. Fusce dolor enim, maximus et justo eu, condimentum ornare ex. Nulla facilisi. Fusce ut enim est. Curabitur scelerisque, odio eu pretium blandit, nunc justo elementum nulla, vitae dignissim nisl tortor at augue.
</p>
<p>
Vestibulum nunc enim, porttitor vel nunc ultrices, facilisis dapibus lectus. Aliquam at gravida dui. Cras tincidunt malesuada mattis. Donec vitae magna convallis, suscipit lacus non, tincidunt lacus. Praesent faucibus et nulla non hendrerit. Nam tempus tincidunt viverra. Donec a justo ut sem porta malesuada. Nulla vestibulum, odio ac ornare ultrices, quam lectus vestibulum lectus, quis dignissim erat urna eget erat. Ut sed dui elementum, pellentesque libero sit amet, faucibus diam. Donec euismod purus nisi, ut fringilla erat pellentesque ut.
</p>
<p>
Cras gravida augue vel arcu scelerisque malesuada. Pellentesque sagittis quam a dolor gravida auctor. Curabitur elit elit, auctor eget ex quis, placerat aliquam ipsum. Ut efficitur dui id metus commodo congue. Nulla id lacus fringilla, semper augue vel, tincidunt eros. Ut non felis elit. Morbi nulla dui, tincidunt et dapibus sodales, condimentum et augue. Sed condimentum diam magna, non sollicitudin lorem pharetra id. Integer posuere pellentesque dolor, dapibus dignissim purus bibendum at. Donec vel diam a velit mattis fermentum. Sed semper aliquam ante, iaculis fermentum neque tincidunt vitae.
</p>
<p>
Fusce auctor iaculis elit nec elementum. Suspendisse non ante faucibus, convallis enim sed, cursus orci. Vestibulum a dolor pellentesque dui bibendum dictum. Phasellus venenatis arcu ut metus aliquam bibendum. Suspendisse sagittis leo felis, in sollicitudin nisl efficitur vel. Nulla feugiat varius elementum. Pellentesque at sem sit amet lacus suscipit dapibus. Mauris porta risus finibus volutpat ullamcorper. Nulla consequat augue quis efficitur rutrum. Cras fermentum dui elementum nisl porttitor, non sollicitudin mauris scelerisque. Donec a sollicitudin quam, eleifend gravida nisl.
</p>
<p>
Aenean eu sapien eleifend, posuere magna vel, ultricies ante. Aliquam nec urna magna. In in eros tellus. Donec a enim eget lorem venenatis feugiat vestibulum pulvinar leo. Morbi et odio lacinia, maximus lacus quis, bibendum ante. Mauris ut ligula quam. Ut tempor nisi in semper iaculis. Etiam ultrices magna quis auctor porttitor. Aliquam mattis, libero ornare tincidunt fermentum, ex leo fringilla neque, consectetur aliquet dolor lorem quis purus. Nam ligula felis, dictum sit amet maximus eu, tristique eu velit.
</p>
<p>
Duis lacinia eu felis et elementum. Suspendisse sed sem augue. Nullam tortor turpis, condimentum sed arcu eu, euismod lobortis odio. Quisque eu interdum purus, non tincidunt neque. Quisque tincidunt dolor vitae ipsum scelerisque, ac facilisis magna viverra. Phasellus malesuada velit nunc, vel ultrices urna sodales vitae. Praesent maximus aliquam tempor. Mauris accumsan imperdiet sodales. Suspendisse potenti. Nulla facilisi. Vestibulum vitae vehicula ipsum. Vivamus sed diam finibus, blandit enim in, commodo massa. Aliquam porttitor lectus sed tellus hendrerit, vitae blandit nisl placerat. Morbi laoreet neque quam, eu blandit dolor venenatis sit amet. Duis quam purus, viverra nec quam id, imperdiet suscipit felis. Nulla rhoncus purus a diam vestibulum dictum.
</p>
<p>
Suspendisse id libero ut ipsum ullamcorper suscipit. Duis sed vehicula leo. Aenean ullamcorper elementum est eu commodo. Curabitur consectetur nibh purus, at elementum magna iaculis eu. Vestibulum sit amet purus nec enim mattis pulvinar. Sed lobortis odio id quam sodales elementum. Nam facilisis aliquam pellentesque. Etiam non mauris eu magna scelerisque varius. Suspendisse non aliquam tellus, sed ullamcorper elit. Nullam id mattis est, quis euismod massa. Pellentesque vestibulum molestie felis nec condimentum. Pellentesque non lacus cursus, pulvinar purus a, ultricies dui. Pellentesque at erat leo. Nullam placerat pharetra est vitae pharetra.
</p>
<p>
Mauris rutrum nunc non sem feugiat vulputate. Vestibulum pulvinar consectetur turpis vitae placerat. Praesent sit amet felis varius, euismod enim nec, finibus diam. Aliquam sed nisi in lorem faucibus ultrices. Aenean aliquam tempor tortor. Sed dapibus blandit arcu, quis dapibus dui egestas vel. Nullam mattis, nulla a ultrices efficitur, turpis ligula rhoncus ligula, vel tristique orci risus sit amet urna.
</p>
<p>
Praesent porttitor facilisis dapibus. Quisque feugiat nec enim ut iaculis. Mauris feugiat, libero non porta suscipit, diam sapien aliquet est, et semper nunc ex nec quam. Etiam ut nulla id mauris placerat commodo. Vestibulum id iaculis libero, sit amet tempus leo. Morbi ullamcorper efficitur enim in mattis. Suspendisse imperdiet dui vitae lorem porta iaculis. Aenean lobortis quam lacus, sit amet rhoncus libero auctor ut. Nullam facilisis felis in fermentum luctus. Fusce odio mi, vehicula vitae suscipit ac, venenatis eget elit. Phasellus laoreet nec elit quis consectetur.
</p>
<p>
Integer justo enim, ornare eget lacus vel, ultricies tincidunt massa. Donec varius odio sed viverra fringilla. Sed lobortis nisi sed commodo posuere. Cras consectetur congue ipsum non pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ullamcorper tortor et urna vestibulum, finibus finibus ex laoreet. Integer aliquam ex at mi tristique, in viverra diam pharetra. Etiam id venenatis arcu. Vivamus et diam eget est mollis volutpat.
</p>
<p>
Pellentesque vulputate porttitor magna sed semper. Cras vehicula sem eget mattis accumsan. Proin maximus ultrices finibus. Proin et elit magna. Curabitur eget fermentum sem. Aliquam laoreet felis id justo tincidunt blandit. Donec finibus erat vitae nisi pellentesque facilisis. Pellentesque porttitor eget purus mollis consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent eu blandit justo. Vivamus nec libero ornare, tempus ex quis, varius dolor. Fusce eu imperdiet arcu. Nam egestas lectus nec mauris volutpat accumsan. Donec risus est, aliquet in eros ac, condimentum porta erat. Ut sagittis, ante sed rutrum vulputate, turpis augue fringilla eros, id dignissim nisi ex id dui. Nulla blandit ut leo at malesuada.
</p>
<p>
Nam quis euismod metus, sed consectetur odio. Ut id lacinia ante. Nulla molestie massa ligula, sed ornare purus euismod nec. Aliquam id quam auctor, aliquet leo vel, imperdiet quam. Nam eros nisi, ultrices nec facilisis sit amet, viverra sed dolor. Integer laoreet nunc quam, sit amet iaculis libero pharetra vitae. Quisque vel posuere diam, eget fermentum est.
</p>
<p>
Etiam nec volutpat urna. Pellentesque tempor sodales libero, non viverra nibh varius quis. Aenean hendrerit egestas molestie. Praesent tincidunt at lectus in sodales. Etiam rhoncus turpis vitae suscipit porttitor. Nulla est erat, pharetra ut tellus fringilla, pharetra consequat leo. Praesent sed finibus tellus, nec tincidunt velit. In pulvinar consequat neque id vulputate. Cras luctus finibus purus, a ultricies augue varius pellentesque. Aenean vehicula, nulla eget gravida euismod, ipsum nibh sollicitudin odio, convallis malesuada turpis elit non quam. Donec ac hendrerit felis.
</p>
<p>
Phasellus eget auctor lorem. Donec ut congue lectus. Fusce est nunc, fringilla at metus ac, volutpat pellentesque turpis. Curabitur elit leo, tincidunt nec velit non, vestibulum condimentum nibh. Maecenas varius justo ligula, quis hendrerit risus elementum quis. Integer felis eros, cursus non euismod vel, tempor sit amet metus. Nulla congue neque lobortis, sagittis purus finibus, pharetra augue. Sed dignissim rhoncus maximus. Fusce eros augue, iaculis sit amet pretium quis, dignissim sed lacus. Proin non tortor eros. Nulla sagittis ligula nec egestas egestas.
</p>
<p>
Vestibulum non nulla ultricies, convallis ante quis, interdum dui. Praesent maximus pulvinar nibh. Aliquam venenatis ante felis, eget ultrices neque posuere quis. Nam auctor in nisl quis vulputate. Donec venenatis ligula at nisi eleifend tincidunt. Fusce augue nibh, pharetra ullamcorper tellus rhoncus, tristique imperdiet massa. Phasellus at elit at risus sodales porta a ut metus. Quisque sodales nisi ac egestas auctor. Quisque hendrerit et risus sed consequat. Nullam ultrices metus elit, at egestas lectus pellentesque vitae. Donec eu vehicula ligula. Nam mattis pharetra arcu et imperdiet. Cras eget dignissim elit, quis porta elit. Vestibulum mollis nec leo in dignissim. Aliquam lacinia gravida dolor a sollicitudin.
</p></div>
<mat-toolbar color="primary">
<button mat-button routerLink="/home" routerLinkActive="active" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="2px">
<span>Home</span>
</button>
</mat-toolbar>
</div>
我的.scss文件如下：
#lipsum {
background-color: #f5f5f6;
}
.mat-toolbar {
position: fixed;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex; flex-direction: column;
}
我拍了一张屏幕截图：here
问题似乎是mat-toolbar没有立即跟随页面底部。 有微小的延迟导致闪烁。
您知道如何解决此问题吗？
答案 0 :(得分：0)
您的mat-toolbar不是html中的类，而是一个元素，如果在其上具有flex，则最好使用margin-top：在其上自动放置而不是固定位置
html
<div class="mat-toolbar" color="primary">
<button mat-button routerLink="/home" routerLinkActive="active" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="2px">
<span>Home</span>
</button>
</div>
css
.mat-toolbar {
margin-top:auto; /* this pushes this div to the bottom of it's parent div that is display flex */
z-index: 2;
width: 100%;
}
答案 1 :(得分：0)
我改变了我的思维方式。 我没有尝试覆盖屏幕底部的导航菜单，而是使用了this method。
它使用一个容器，并通过显示滚动条来允许内容溢出，并且菜单导航使用底部。现在不再有闪烁的问题。