Skip to content

bootstrap modal fails when css3finalize included #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
katowulf opened this issue Jun 17, 2012 · 3 comments
Closed

bootstrap modal fails when css3finalize included #15

katowulf opened this issue Jun 17, 2012 · 3 comments

Comments

@katowulf
Copy link

Hi there!

I've run into an interesting conflict; including css3finalize causes Twitter Bootstrap's modal to fail:

http://jsfiddle.net/katowulf/jjLKr/

If I take css3finalize out, it magically works again:

http://jsfiddle.net/katowulf/vDpVF/2/

I can't seem to produce so much as a single error message to get me started on the right path, so I hoped to pass this on to the experts and see if anything comes to mind.

Cheers!

@katowulf
Copy link
Author

I think I've stumbled on the offending code. In bootstrap's modal js there is this bit of code:

    /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
     * ======================================================= */

    $.support.transition = (function () {

      var transitionEnd = (function () {

        var el = document.createElement('bootstrap')
          , transEndEventNames = {
               'WebkitTransition' : 'webkitTransitionEnd'
            ,  'MozTransition'    : 'transitionend'
            ,  'OTransition'      : 'oTransitionEnd'
            ,  'msTransition'     : 'MSTransitionEnd'
            ,  'transition'       : 'transitionend'
            }
          , name

        for (name in transEndEventNames){
          if (el.style[name] !== undefined) {
            return transEndEventNames[name]
          }
        }

      }())

      return transitionEnd && {
        end: transitionEnd
      }

    })()

So this looks to be the source of the issue. Any ideas on how I reconcile these two?

@codler
Copy link
Owner

codler commented Jun 17, 2012

After a few hours on debugging I found out it was jQuery fault. jQuery 1.7.2 seems to have some bug with cssHooks display. But it seems to be fixed on their latest jQuery version http://jsfiddle.net/jjLKr/1/

So to solve this, you can either use jQuerys latest dev version or remove the word " display" on this row https://github.com/codler/jQuery-Css3-Finalize/blob/v2.4/jquery.css3finalize.js#L603

@codler codler closed this as completed Jun 17, 2012
@katowulf
Copy link
Author

Hello! Thanks so much for putting so much time into this issue. I would have spent days hunting that down.

Downloading the edge release did fix up my issues!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants