watchCSS on Safari OSX Flickity does not activate within hidden container

[johnhornsby]

It would seem that Safari does not render :after elements within hidden containers, when using watchCSS in Flickity within a hidden container, the create process skips activate. Then when calling resize() upon wanting to reveal the container the Flickity has not properly activated.

https://codepen.io/johnhornsby/pen/NgEQKg

[desandro]

Thanks for reporting this issue. I'm having trouble understanding what you're trying to achieve. You can hide the Flickity carousel, and disable it with watchCSS, and then with a media query, show the carousel and enable it. See demo https://codepen.io/desandro/pen/f18f89765ce94cf8b2cda7c265c987ec/

Are you trying to enable Flickity within a hidden container? Is this something similar to a tab issue?

[johnhornsby]

Hello, yes you're right the carousel is hidden initially within a tab, and the resize() method is employed to obviously get Flickity to evaluate the contents and add sizes etc. However we are also using watchCSS to hide or show Flickity for various media queries.

The code we currently have instantiates the carousel on page load before the tab is pressed to reveal the carousel. On Safari 10.1.1 within the watchCSS function is this line

var afterContent = getComputedStyle( this.element, ':after' ).content; line 754. evaluates to "", and the therefore this.activate(); is never called and therefore the carousel is not properly initiated and effectively lies dead in the water.

Upon looking further if you look at the DOM neither Chrome or Safari appear to show the :after or :before content while a container is hidden, except that Chrome will return the :after elements content when you query it with getComputedStyle.

Dam I checked my example and seem to have saved it before I put the watchCSS: true into the options. Sorry. Have a look now using safari and you will see it will not initialise properly

https://codepen.io/johnhornsby/pen/NgEQKg

I have personally created a work around that only initialises when the tab is clicked but still Safari will presenting you with a problem when using it in a hidden container and using watchCSS

[bakura10]

Hi,

I'm encountering the same issue as well. Is there a simpler workaround to achieve this? :)

[rhyskjones]

Hi,

I've also encountered this issue.

The workaround that I used was to create an empty div in the DOM with a height/width of 0 and apply the required '::after' styles to this element in CSS.

You can then initialise Flickity with an additional option which will be the newly created empty element object, for example:

var newWatchCSSElement= document.getElementById('flickity-is-active') var flickity = new Flickity(container, { newWatchCSSElement: newWatchCSSElement });

Within Flickity's watchCSS method, check whether the new option exists and if so, use the empty div created in the DOM (around line 754):

var el = this.options.newWatchCSSElement ? this.options.newWatchCSSElement : this.element; var afterContent = getComputedStyle(el, ':after' ).content;

By checking if the new element exists you can fallback to the default Flickity element for watching CSS.

I hope this helps as an intermediate workaround for the issue.

:)

[chrislopesdev]

If I use "watchCSS" in my html and don't include the css:

// enable Flickity by default .testimonials__slider:after { content: 'flickity'; display: none; // hide :after }

@media screen and ( max-width: $bp-small ) { // disable Flickity for small devices .testimonials__slider:after { content: ''; } }

it works in Safari, but not Chrome or Firefox.

But if I do include the css above it works in Chrome and Firefox, but not Safari.

Has anyone else had this issue??