Safari css width transition not working with different unit measurements

Question

I'm having an issue with -webkit-transition in Safari. These transitions work fine in Chrome, FF, and IE10 (using the non-prefixed transition property).

In my site, there are 3 panels that can be viewed. The main one opens by default and the other 2 are collapsed on the right of the window showing a sliver of their content. When a collapsed panel is clicked an additional class is added to it via JS and it transitions to 100% width.

CSS:

.panel-1{
  width: 100%;
}

.panel-2{
    width: 8rem;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    z-index: 500;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.panel-2:hover{
     width: 10rem;
}

.panel-2.panel-open{
     width: 100%;
}

.panel-3{
    width: 4rem;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    z-index: 501;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.panel-3:hover{
     width: 6rem;
}

.panel-3.panel-open{
     width: 100%;
}

The problem seems to be with the difference of measurement units. The hover transitions work as intended (rem to rem), however the width transition (rem to %) on "panel-open" skips the transition and just snaps open. If I switch the default width to a percentage instead of rem, the transition works again. I can't do this however as it is a fluid site and the panel collapsed widths need to be static and not relative.

I have attempted to add a min-width in %, but that has not helped. Any advice on this would be greatly appreciated.

Answer 1

Transitions on width are a problem. Try max-width.