bootstrap modal fails when css3finalize included
Closed this issue · 3 comments
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!
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?
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
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!