terrymun/Fluidbox

Transition Back doesn't Work

Closed this issue · 2 comments

Hi Terry

I found your really well done fluidbox today and wanted to test it and found, that the «back-transition» doesn't work. Is there a fix for this issue?

The transition doesn't work in your online example and as well in the downloaded git repository in this browsers on OSX 10.11.1: Google Chrome and Safari – both at the newest version.

I believe that has to do with autoprefixer mucking something up. I'll issue a hotfix ASAP.

You are using the latest commit that is not released yet—try to download v2.0.1. That is the known working version.

Issue fixed in f4e9635.

The reason is because autoprefixer duplicates properties when prefixing—while this behaviour is desirable at times, it is not for the case of Fluidbox. This causes the line:

transition-property: opacity, transform, -webkit-transform;

…to be generated, which will break the transition effect. Right now I will stick to manually prefixing this for .fluidbox-ghost only:

// transition-property manually prefixed
// Autoprefixer insists on adding the line:
// > transition-property: opacity, transform, -webkit-transform;
// ...which will break Fluidbox
-webkit-transition-property: opacity, -webkit-transform;    /* autoprefixer: off */
transition-property: opacity, -webkit-transform;            /* autoprefixer: off */
transition-property: opacity, transform;                    /* autoprefixer: off */