Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS hickup on cloned element

See original GitHub issue

transform:scale on all divs except current hickup when cloned element comes to focus

`[ paste your jsfiddle link here ]`

http://jsfiddle.net/fmv3huvo/

Steps to reproduce the problem

You can see it on fidde, the css line that makes all slides except the current one smaller is on line 9

What is the expected behaviour?

It should increase in size smoothly like all other slides, NOT abruptly.

What is observed behaviour?

The cloned element abruptly increases in size when it comes to focus.

More Details

Chrome
1.5.9
First time I am trying this slider.

Issue Analytics

State:
Created 7 years ago
Comments:9

Top GitHub Comments

1reaction

leggomuhgreggocommented, Mar 30, 2016

Oh man, I gave you a way more complicated solution than you needed.

So the issue is slick clones and attribute identifiers (classes). It’s true that slick-current doesn’t get applied to a clone before it appears, casuing that jump, but slick-center does get applied to the clone properly. If all you need is to consider the state of center vs not center then you can just change the selector and it should work. Here’s a fork of your fiddle

My solution was about position relative to the center and cloned slides, which was overkill in this case, but the thing that needed to change was the css selection in that instance too.

0reactions

leggomuhgreggocommented, Mar 30, 2016

Happy to help!

Top Results From Across the Web

JQuery: How to clone an element into it's own child

Problem 01: The first problem is that I can clone the elements based on a simple CSS selector, but it clones ALL of...

clone problem - Forums - CSS-Tricks

I have a drop-down menu and a button to run a simple function. I added a clone button to duplicate the section. However...

Using Hiccup to Describe HTML — reagent 1.1.1 - cljdoc

Reagent uses a datastructure known as Hiccup to describe HTML. Hiccup describes HTML elements and user-defined components as a nested ClojureScript vector:

visibility: hidden height: 0 - Philadelphia Mixing Solutions

I can't have it be display: none or visibility: hidden, because I want to animate on this element. Short of cloning the entire...

CSS for Roam (1st lesson): Roam with Style | by Cato Minor

Typically, CSS is used to change the appearance of text or HTML elements, such as tables. ... [[roam/css]] page in Roam itself; using...