CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsafari
Mark W
Mark W

Reputation: 705

CSS broken with inline-block in safari - width of zero not set

I am trying to create a horizontal accordion in twitter bootstrap (2.3.2). I have found some css online that works very well and allows me to utilize the existing js. This all works great - except in safari (iOS and Windows). In safari the collapsed element still retains some width even though the width is correctly set to 0px.

I have created a fiddle: http://jsfiddle.net/foetalstalk/3erSh/

The css I am using is:

.accordion-group, .accordion-heading, .accordion-body
{
    display:inline-block;
}
.collapse
{
    height:auto;
    width:auto
}
.collapse.height
{
    height:0;
    -webkit-transition:height .35s ease;
    -moz-transition:height .35s ease;
    -o-transition:height .35s ease;
    transition:height .35s ease;
}
.collapse.width
{
    width:0;
    -webkit-transition:width .35s ease;
    -moz-transition:width .35s ease;
    -o-transition:width .35s ease;
    transition:width .35s ease;
}
.collapse.width.in
{
    width:auto
}
.collapse.height.in
{
    height:auto
}

I am developing on windows and can replicate the problem using the safari downloaded from here: http://support.apple.com/kb/dl1531

The problem seems to be with the inline-block elements. Can this be fixed with a little sprinkle of css magic?

Upvotes: 2

Views: 8733

Answers (2)

Mark W
Mark W

Reputation: 705

Thanks for the help Anon.

As it happens it was easier to create this from scratch as suggested by Anon.

http://jsfiddle.net/foetalstalk/N2GSV/23/

.accord-group, .accord-heading, .accord-body
{
    display:inline-block;
}
.accord-body 
{
    vertical-align:top;
    visibility:hidden;
    /* non zero width - for safari */
    margin-left:-1px;
    width:1px;
    -webkit-transition:all 0.35s ease;
    -moz-transition:all 0.35s ease;
    -o-transition:all 0.35s ease;
    transition:all 0.35s ease;
    overflow:hidden;
}

.accord-body.in 
{
    visibility:visible;
    margin-left:0px;
    width:100px;
}

See fiddle for html and js.

Upvotes: 1

Anon
Anon

Reputation: 2874

Try use max-width:0; and max-width:1000px;. It's work for me

.collapse.width
{
    width:0px;
    max-width:0;
    -webkit-transition:width .35s ease;
    -moz-transition:width .35s ease;
    -o-transition:width .35s ease;
    transition:width .35s ease;
}
.collapse.width.in
{
    width:auto;
    max-width:1000px;
}

DEMO

Upvotes: 2

Related Questions