ff31 issues - Threat beta
j987987 opened this issue · comments
In firefox 31, there are some visual bugs with threat beta
- Reports carousel doesn't display properly
- Right sidebar doesn't have the polyfill CSS class so it overlaps content
The issue with the transparent backgrounds is related to the fact that FF31 can't render linear-gradients as background images, so [style.background-image]="getReportBackground(report)" needs to be changed to [style.background]="getReportBackground(report)"
The side panel can be fixed by giving a class (I do not recommend inline-styles for this, with how Angular Material handles things under the hood) that will give the mat-sidenav-content in the feed and threat dashboard beta components margin-right equal to that of mat-sidenav's width.
In threat dashboard beta component, would recommend changing right-side-panel's width to something fixed. Perhaps, #trends-trench's width: 380px; could work, and they could share a fix!
wrt the side panel, it appears FF31 is not recognizing the panel as consuming some of the available space in the content area. Not only are the sort buttons cut off, but the carousels are not displaying right arrows or pager buttons. FF31 does not know how wide the content should be.
mat-sidenav is absolutely positioned. Angular Material has a hook where it will apply margin to mat-sidenav-content to counteract the width of mat-sidenav; that hook just isn't fired in FF31.
In chrome:
In ff31 (note no styles):
Under the hood, this is powered by the _updateContentMargins function in the MatDrawerContainer class which updates the _contentMarginChanges Subject that the content component listens to for margin updates, but this function does not work properly in FF31 so the _contentMarginChanges's stream is never started.
I'm going to break this out since the global feed will require additional work. This way we can get the fixes in for the feed view now.
Follow on: #1560