search

zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 215 forks source link

Docs: Modal page Flash #156

Closed zurbrandon closed 9 years ago

zurbrandon commented 9 years ago

When you visit the modal page in the docs a dark flash happens. Looks like the overlay is coming in and then disappearing.

viztastic commented 9 years ago

Further to this, I have noticed that the lines of code now all display cramped together. See screenshot below (this isn't only for the modal pages, seems to be across all the docs)

image

(using Chrome)

AntJanus commented 9 years ago

@zurbrandon it seems to be a modal overlay issue. It has a display:none attached to it but it also has a display:flex which overrides the display none. Since it has a transition on it, it flashes in-n-out. It seems that the display: flex should be part of the is-active declaration.

Because otherwise, for some reason, it simply fades out to opacity: 0.

I'm not sure if this is entirely correct but that seems to be what's currently happening. However, if we do add display: flex on is-active, the entire thing will not animate :/

gakimball commented 9 years ago

@viztastic For the code samples, we're shifting from using a Markdown parser to using an Angular implementation of highlight.js, but not every sample has been fixed yet.

@AntJanus Ah okay, so this is like the other animation stuff where you need an in-between setup phase. Normally the overlay is display: none, and then when a modal is called in, it needs to be set to display: flex and opacity: 0, first, and then set to opacity: 1 to trigger the transition.

The modal overlay doesn't need any animation support—it should just be hardcoded to fade in and out. So if I add those two states (probably just with ng-enter and ng-enter active to keep it consistent, and scrap is-active) would that work?

Unfortunately we can't do the lazy method with pointer-events: none, because IE10 confusingly doesn't support it.

AntJanus commented 9 years ago

@gakimball so I finished the directive animations so yes, this should work. The overlay uses the same custom animations logic with hard-coded fadeIn and fadeOut values. So, if you get rid of the transitions attached directly to the overlay, everything should work correctly! :)

gakimball commented 9 years ago

Fixed in this commit: 63fb722c13d1317a6bc20d1c03ebd74501ffd615