0

I am adding a class to an element, as soon as a event is triggered. This class should change the elements opacity. This works perfectly in Firefox, but not in Chrome (and Canary) as well as Opera and -big surprise- IE8.

Here is the CSS:

.bx-controls-direction .disabled {
  opacity: 0.5;
  background-color: #fff;
  cursor: default;
}

If I disable the property with the inspector and enable it again, it works fine. Strangely enough, it works on other elements. This would let one assume, that there is a problem with the JS and I would agree but the class gets added correctly.

EDIT: The html (simplified)

<section class="slider box">
    <div class="full-width first-line">
        <div class="one-third-with-padding box">
                <ul class="bxslider big-slider" data-has-pager="false" data-controlls-color="#9131dd">
                    <li class="text"><h2>Head</h2>
                      <div class="first" >
                        <p>Text</p></div>
                    </li>
                    <li class="text"><h2>HEAD2</h2>
                      <div class="first" >
                        <p>Text2</p>
                      </div>
                    </li>
                    <li class="text"><h2>HEAD3</h2>
                      <div class="first" >
                        Text3
                      </div>
                    </li>
                  </ul>
        </div>
      </div>
   </section>

<div class="bx-controls-direction">
  <a style="background-color: rgb(145, 49, 221);" class="bx-prev" href="">Prev</a>
  <a style="background-color: rgb(145, 49, 221);" class="bx-next disabled" href="">Next</a>
</div>
stiller_leser
  • 1,512
  • 1
  • 16
  • 39
  • can you post the html and any other css effecting it? – atmd Jan 21 '15 at 15:35
  • What does your HTML look like? – Marcelo Jan 21 '15 at 15:35
  • In Chrome, did you look at the CSS property hierarchy in the debugger to see what it thinks the CSS value is and if not 0.5, what CSS rule it thinks has precedence over yours? – jfriend00 Jan 21 '15 at 15:41
  • I don't think IE8 supports `opacity` in that format. "Transparency for elements in IE8 and older can be achieved using the proprietary "filter" property " per [**CanI Use.com**](http://caniuse.com/#feat=css-opacity) – Paulie_D Jan 21 '15 at 15:42
  • Added HTML - totally forgot about it. @jfriend00 Which Debugger you mean? The Inspector? – stiller_leser Jan 21 '15 at 15:45
  • Please see ["Should questions include “tags” in their titles?"](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), where the consensus is "no, they should not"! –  Jan 21 '15 at 15:46
  • 1
    In Chrome, does the background-color change when you add the class (indicating that other CSS rules associated with the class are active)? – jfriend00 Jan 21 '15 at 15:49
  • Yes, it does change. If I use important (Since there is a inline style on the original element). If I add the important and activate it on the element the effect is right, the second time. It seems to be a combination of the inline style on the background-color and the style defined in the css). – stiller_leser Jan 21 '15 at 16:00

1 Answers1

0

This was caused by a 5 years old bug in Chrome, that still is not fixed (at least it seems like it). Check the answer here. In short, you only have to force Chrome to redraw the element.

Community
  • 1
  • 1
stiller_leser
  • 1,512
  • 1
  • 16
  • 39