Question

I have a calc definition:

#navigation-panel {
     a, i.navEmptyBlock {    
        // ...
        width: -webkit-calc(12% - 2px);
        width: -moz-calc(12% - 2px);
        width: -o-calc(12% - 2px);
        width: -ms-calc(12% - 2px);
        width: calc(12% - 2px);

        @media (max-width: 640px) {      
          width: -webkit-calc(20% - 2px);
          width: -moz-calc(20% - 2px);
          width: -o-calc(20% - 2px);
          width: -ms-calc(20% - 2px);
          width: calc(20% - 2px);
        }
        // ...
    }
}

When resized at 640px it should apply the new calc, but it doesn’t.

I’ve inspected with Google Developer Tools and the new calc DOES apply but it’s not overriding the old one for any weird reason.

Developer Tools shows old one crossed out but it’s still applying it!. If I disable the crossed one it works.

Tried in firefox and it works.

It seems chrome doesn’t override -webkit-calc calls?

Generated Code from COMPASS:

#navigation-panel a, #navigation-panel i.navEmptyBlock {
  float: left;
  margin: 0 auto;
  text-decoration: none;
  color: #080808;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  position: relative;
  width: -webkit-calc(12% - 2px);
  width: -moz-calc(12% - 2px);
  width: -o-calc(12% - 2px);
  width: -ms-calc(12% - 2px);
  width: calc(12% - 2px);
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  display: inline-block;
  border: 1px solid #3284b6;
  text-align: center;
  padding-top: 6px;
  height: 25px;
  font-family: Tahoma;
  font-size: 11px;
  /* Windows */
  background: rgba(255, 255, 255, 0);
  -webkit-transition: background 80ms;
  font-weight: 800;
  box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.9); }
  @media (max-width: 640px) {
    #navigation-panel a, #navigation-panel i.navEmptyBlock {
      width: -webkit-calc(20% - 2px);
      width: -moz-calc(20% - 2px);
      width: -o-calc(20% - 2px);
      width: -ms-calc(20% - 2px);
      width: calc(20% - 2px); } }

EDIT: The plain width does override the first calc, but second cald overrides the new plain width but does not apply!

Answer 1

Putting the webkit’s prefixes in a repeated selector works somehow.

a, i.navEmptyBlock {    
        @media (max-width: 640px) {
          // fallback
          width: 18%;
          width: -webkit-calc(20% - 2px);         
        }
        @media (max-width: 565px) {
          // fallback
          width: 19%;
          width: -webkit-calc(20% - 2px);          
        }    
        @media (max-width: 355px) {
          // fallback
          width: 15.5%;
          width: -webkit-calc(20% - 2px);       
        }
      }
    a, i.navEmptyBlock {    
        float: left;
        text-decoration: none;
        color: $nav-panel-font-color;
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);   
        position: rela

tive;
width: 12%;

    width: -moz-calc(12% - 0.18em);
    width: -o-calc(12% - 0.18em);
    width: -ms-calc(12% - 0.18em);
    width: calc(12% - 0.18em);

    @media (max-width: 640px) {
      // fallback
      width: 19%;          
      width: -moz-calc(20% - 2px);
      width: -o-calc(20% - 2px);
      width: -ms-calc(20% - 2px);
      width: calc(20% - 2px);
    }
    @media (max-width: 565px) {            
      width: -moz-calc(20% - 2px);
      width: -o-calc(20% - 2px);
      width: -ms-calc(20% - 2px);
      width: calc(20% - 2px);
    }    
    @media (max-width: 355px) {           
      width: -moz-calc(20% - 2px);
      width: -o-calc(20% - 2px);
      width: -ms-calc(20% - 2px);
      width: calc(20% - 2px);
    }