Weird Shape Pace.js

Question

Just installed pace.js and paceThemeRound.css (centre radar theme) and I get a weird shape as image below. The problem is due to the fact that the script is conflicting with bootstrap.min.css. If I remove it from my website it is working fine.

https://jsfiddle.net/6pkq5egd/

Apache tiles configuration

    <put-list-attribute name="stylesheets_top">
        <add-attribute value="/static/public/css/bootstrap.min.css" />          
        <add-attribute value="/static/protected/css/global.css" />
        <add-attribute value="/static/protected/css/header.css" />
        <add-attribute value="/static/protected/css/footer.css" />
        <add-attribute value="/static/protected/css/paceThemeRound.css" />
    </put-list-attribute>

Any idea on how to fix it?

Answer 1

Apparently it is a bug,

Since center radar theme assumes that box-sizing property is set to content-box, the layout is a little bit broken when that property is set to border-box (especially with twitter bootstrap). I explicitly added box-sizing: content-box and now it works.

Hope this can be of help