Quantcast

Chrome not re-drawing when markup changes?

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Chrome not re-drawing when markup changes?

Kyle Sessions
Hi all,

I was wondering if one of you might have some insight into this problem I'm
experiencing. I'm using the Twitter Bootstrap CSS and Javascript to toggle
a list of items on my website. We display a few items in a list, and then
have a "More" link to display the rest of the items. The showing/hiding of
the rest of the items is controlled via bootstrap-transition.js and
bootstrap-collapse.js. This is all working well enough. The problem is
that, in my markup, I actually have a "More" link _and_ a "Fewer" link. I
want to hide the "Fewer" link when the additional list is closed, and hide
the "More" link when the additional list is open. I'm using the following
CSS to control the showing and hiding of the links (I have a live example
that I'll link to at the end of this, but here's some code if you don't
want to follow the link):

.collapse+.switch>.more {display:inline;}
.collapse+.switch>.fewer {display:none;}
.in.collapse+.switch>.more {display:none;}
.in.collapse+.switch>.fewer {display:inline;}

.collapse is my <ul> with the additional items. .switch is my <div> holding
the two links, More and Fewer. .collapse and .switch are adjacent siblings.
When you click the link to toggle the list, Bootstrap toggles class="in" on
the target element. So, .collapse should always select the <ul> and
.in.collapse should select the <ul> only when it's open.

The actual problem is that, when the list is closed, and I click on "More"
to open it, "More" does not disappear until I mouse over it. This is only a
problem with hiding "More". The "Fewer" link appears as soon as you click
"More". And, oddly enough, this is only a problem when opening the list.
When it's already open, and I click "Fewer" to close it, the "More" link
immediately appears and the "Fewer" link immediately disappears. But when
the list is closed and I go to open it, it's like the browser is not
noticing that it needs to hide the "More" link until I force it to notice
by hovering over the link. (Actually, on closer watching, it looks like the
"More" link does disappear immediately, then once the list expands, it
reappears until you mouse over it.)

I'm experiencing this problem only in Chrome. Firefox and IE both seem
fine. (Actually, in my real-world project, IE9 was showing the same
behavior as Chrome, but in my test-case here, IE's fine; it's only Chrome
that's misbehaving.)

Anyway, as promised, a live example: http://kage23.com/collapse.html

Any insight would be greatly appreciated!

Thanks in advance,
Kyle

--
Kyle G Sessions
Berkeley Electronic Press
[hidden email]

510-665-1200 + 128

www.bepress.com

bepress: the frontier of scholarly publishing since 1999

Check out IR success stories on the DC Telegraph at
http://blog.digitalcommons.bepress.com
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Chrome not re-drawing when markup changes?

David Hucklesby-2
On 8/17/12 6:25 PM, Kyle Sessions wrote:

> Hi all,
>
> I was wondering if one of you might have some insight into this problem I'm
> experiencing. I'm using the Twitter Bootstrap CSS and Javascript to toggle
> a list of items on my website. We display a few items in a list, and then
> have a "More" link to display the rest of the items. The showing/hiding of
> the rest of the items is controlled via bootstrap-transition.js and
> bootstrap-collapse.js. This is all working well enough. The problem is
> that, in my markup, I actually have a "More" link _and_ a "Fewer" link. I
> want to hide the "Fewer" link when the additional list is closed, and hide
> the "More" link when the additional list is open. I'm using the following
> CSS to control the showing and hiding of the links (I have a live example
> that I'll link to at the end of this, but here's some code if you don't
> want to follow the link):
>
> .collapse+.switch>.more {display:inline;}
> .collapse+.switch>.fewer {display:none;}
> .in.collapse+.switch>.more {display:none;}
> .in.collapse+.switch>.fewer {display:inline;}
>
[...]
>
> The actual problem is that, when the list is closed, and I click on "More"
> to open it, "More" does not disappear until I mouse over it. ...

Yes. Very odd. Same in Safari 6 (Mac).

Anyway, simplifying the CSS a bit, this seems to work as you wish:

.switch>.more {display:inline;}
.switch>.fewer {display:none;}
.in+.switch>.more {display:none;}
.in+.switch>.fewer {display:inline;}

--
Cordially,
David


______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Chrome not re-drawing when markup changes?

Kyle Sessions
On Fri, Aug 17, 2012 at 9:30 PM, David Hucklesby <[hidden email]>wrote:

> On 8/17/12 6:25 PM, Kyle Sessions wrote:
>
>> Hi all,
>>
>> I was wondering if one of you might have some insight into this problem
>> I'm
>> experiencing. I'm using the Twitter Bootstrap CSS and Javascript to toggle
>> a list of items on my website. We display a few items in a list, and then
>> have a "More" link to display the rest of the items. The showing/hiding of
>> the rest of the items is controlled via bootstrap-transition.js and
>> bootstrap-collapse.js. This is all working well enough. The problem is
>> that, in my markup, I actually have a "More" link _and_ a "Fewer" link. I
>> want to hide the "Fewer" link when the additional list is closed, and hide
>> the "More" link when the additional list is open. I'm using the following
>> CSS to control the showing and hiding of the links (I have a live example
>> that I'll link to at the end of this, but here's some code if you don't
>> want to follow the link):
>>
>> .collapse+.switch>.more {display:inline;}
>> .collapse+.switch>.fewer {display:none;}
>> .in.collapse+.switch>.more {display:none;}
>> .in.collapse+.switch>.fewer {display:inline;}
>>
>>  [...]
>
>>
>> The actual problem is that, when the list is closed, and I click on "More"
>> to open it, "More" does not disappear until I mouse over it. ...
>>
>
> Yes. Very odd. Same in Safari 6 (Mac).
>
> Anyway, simplifying the CSS a bit, this seems to work as you wish:
>
> .switch>.more {display:inline;}
> .switch>.fewer {display:none;}
> .in+.switch>.more {display:none;}
> .in+.switch>.fewer {display:inline;}


Thanks, David! That does seem to totally fix the issue. How bizarre.

Just purely out of curiosity (and hoping to avoid this in the future), does
anyone have any ideas _why_ this was happening? Is it maybe just a case of
Chrome not wanting to deal with more-complicated CSS unless / until it has
to? I have no idea.

Thanks,
Kyle
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Loading...