This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
md-toast makes scroll bar appear during animation when positionned bottom #2936
Description
Hi guys,
Thanks for your constant enhancement of angular material design.
As you can see on CodePen where i reused the doc demo, the scroll bar appears during the appear/disappear animation of a md-toast component positioned at bottom.
It is certainly caused by the fact that the md-toast component is first created at position documents' height + its own height and then it goes up a position documents' height.
On the other hand, this event doesn't appear when the toast is positioned top even if it's animation shows him appearing from a higher position.
Thank you,
Izcalli
Reacted by Josh Hawkins and Fadi Nouh
Activity
TalPasi commentedon May 21, 2015
+1
Lenninlasd commentedon May 21, 2015
+1
mpelts commentedon Jun 7, 2015
+1
webley commentedon Jun 8, 2015
+1
ricardobfa commentedon Jun 16, 2015
+1
visurel commentedon Jun 19, 2015
+1
theblang commentedon Jun 25, 2015
+1
vigneshdv commentedon Jul 17, 2015
+1
karthikcsridhar commentedon Aug 5, 2015
+1
matpag commentedon Aug 7, 2015
+1
giulioprovasi commentedon Aug 18, 2015
+1
50 remaining items
fix(toast): Hide scrollbars during animation.
fix(toast): Hide scrollbars during animation.
fix(toast): Hide scrollbars during animation.
fix(toast): Hide scrollbars during animation.
TheJesper commentedon Apr 20, 2016
In my case the scroll-bar is hidden shortly during the animation. This creates a "flickering" user experience every time the toast is displayed, especially when many toasts are "queued up" and the scroll-bar shows and hides multiple times.
The CSS causing this should definitely be eliminated from the angular/material code.
From angular-material.css:
md-toast-animating{ overflow:hidden!important }So, depending on what you want to achieve you could always override this:
body.md-toast-animating { overflow: auto !important; }Hope this helps someone! /Jesper Wilfing
chris-carrington commentedon Apr 21, 2016
@TheJesper Thank you for existing!
DmitryEfimenko commentedon Jul 5, 2016
in latest version they prefixed this class with an underscore. So:
bobwah commentedon Aug 15, 2016
sorry for my lack of understanding, why is:
md-toast-animating{ overflow:hidden!important }
needed in the first place?
topherfangio commentedon Aug 16, 2016
@bobwah That code was added to fix this bug (#2936) of the scrollbars appearing during animations. We have a better fix in mind and I had a working prototype at one point. I will track that down and see what it wasn't merged.
bobwah commentedon Aug 17, 2016
sounds good! thanks
RyanHayden commentedon Sep 5, 2016
I was having the same issue, fixed by wrapping my root component in md-content with flex set to 100. This also fixed the issue of the toast appearing mid screen when I scrolled. If you look at the html the body was not growing appropriately with the component content, unless this was added.
<md-content flex="100"> <menu></menu> <div style="padding: 5px;"> <page></page> </div> </md-content>eranshapira commentedon Oct 10, 2016
i have to say that the fix of overflow: hidden !important; is probably the worst possible fix to that error. breaks pages.
jjhesk commentedon Dec 7, 2016
+∞
dcarrask commentedon Jan 3, 2017
Thanks @RyanHayden!!
After few day investing some time without getting any solution FINALLY I got it thank to your tip!
Cheers, mate!
Anujndls commentedon Jun 6, 2017
+1