First card appears with wrong frame

[silviu-geronimo]

I have a problem that occurs very seldom but it's pretty ugly.

First time when I open my screen where I have the draggables cards , the cards appears in very little size and placed in the top left.

Does anyone know how to fix this or is it a fix already existing?

[numen31337]

I saw this issue also. There is other issues like this, for example there is issue with appearing of a deck when controller is not presented, you will see transparent deck until you swipe first invisible card :) I think that most of this issues is comes from layer animations. We have already done some workarounds for such issues but they are still exist. Most of them is about initial appearance of deck.

[AEugene]

@silviu-geronimo which version of Koloda do you use?
I wasn't able to reproduce this issue. It would be great if you have steps.
@numen31337 Could you share these workarounds with us?

[numen31337]

About wrong frame for first card, unfortunately I can't remember what I've done to fix this but there was bug about it. Probably with was fixed with new animations commit in one of Koloda updates few month ago, not sure...
Here is screenshot of this bug:
http://postimg.org/image/gtgegtobl/

I also clearly remember that there was same issue but with broken frame only for first card, all next cards was right

Talking about alpha this is just some dirty hack, I don't even know why this works, but if you just set alpha to 1 it doesn't help:
func resetKolodaAlpha() {
//this is fix for some unknown bug when you leave screen durring deck is presenting
//and see invisible deck, but you able to swipe invisible card, then deck is appears
kolodaView.alpha = 0.0
kolodaView.alpha = 1.0
}

[silviu-geronimo]

@AEugene : I don't know which version I am using, I started the project 3 months ago. I will try to update to the latest version, tough I have made some changes in the code.

[AEugene]

@silviu-geronimo Is your issue resolved?
@numen31337 Issue with alpha is reproducible when you leave screen while deck appears?

[numen31337]

@AEugene yep, looks like this case is reproducible when you presenting deck during another controlled is presented instead of one that containing this deck (in our case it's in our custom tab bar)

[tirrorex]

This issue is still there, i have it on my current test application.
I use the architecture of the example and instead of displaying a UIImageView i have a xib with a custom view and i load it in viewForCardAtIndex.

If i use my network call to load datas and reload the view after charging the datas in my callback everything is fine.
But if i already have the datas and reload right away i have this bug.

[silviu-geronimo]

Hello tirrorex, It seemed that I had this issue when I was displaying the view controller during the first card appearing animation (the one that scales the container from CGRectZero to final frame) . If I was displaying it right before/after the animation started/ended it was ok.

After lots of code modifications I found out that commenting 'clear()' method will do the trick:
I post the entire method because I have some very old version:

public func reloadData() {
    guard let numberOfCards = dataSource?.koloda(kolodaNumberOfCards: self) where numberOfCards > 0 else {
        return
    }
    countOfCards = Int(numberOfCards)

    let missingCards = min(countOfVisibleCards - visibleCards.count, countOfCards - (currentCardNumber + 1))

    if currentCardNumber == 0 {
        //clear()
    }

    if countOfCards - (currentCardNumber + visibleCards.count) > 0 {

        if !visibleCards.isEmpty {
            loadMissingCards(missingCards)
        } else {
            setupDeck()
            layoutDeck()

            if let shouldApply = delegate?.koloda(kolodaShouldApplyAppearAnimation: self) where shouldApply == true {
                self.alpha = 0
                applyAppearAnimation()
            }
        }

    } else {

        reconfigureCards()
    }
}

Hope it will fix your problem! Looking forward for a feedback.

[tirrorex]

Setting the datasource and refresh the ui in viewDidAppear seems to fix the problem.
Thanks :)

[danielchangsoojones]

This problem still exist with the swift 3 update. My Koloda cards worked perfectly when I was loading the data from my API, and then telling the cards to reload once I had pulled down the data. It was working because the data was loading after the view had appeared. But, when I had passed the data to my class, as in I had the data right away in viewDidLoad, then the Koloda cards were misplaced. I used to @tirrorex fix to deal with this bug in the short term.

[mrigdon-zz]

fyi @silviu-geronimo 's fix worked for me.

[rickyjwhong]

Same here. API callbacks configure the cards correctly, but synchronous data/reload will have the layout all screwed up, noticeable in 4 inch devices. Answer from @tirrorex fixed it temporarily.

[silviu-geronimo]

@mrigdon Unfortunately I have to announce you that the bug is still occurring using that fix. I struggle to find a new fix. Maybe @tirrorex answer will do it.

@tirrorex and @rickyjwhong: How do you refresh the UI in viewDidAppear ? I am using the code below and it is generating the frame issue that we are complaining here:

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    _deckView.delegate = self;
    _deckView.dataSource = self;

    [self resetDeck]; // [_deckView reloadData]; => it's also creating a ui bug
}

[xiaosongshu]

@silviu-geronimo did you ever figure this out? (your original fix works for me)

[silviu-geronimo]

@xiaosongshu the library version that I am using had some methods responding to device rotation. Basically when I was moving the device on a Z axis in the same moment a card swipe was made the final frame of the card was wrong.

So first solution I have posted here and removing the rotation handling method made the library works well.

[silviu-geronimo]

@xiaosongshu the library version that I am using had some methods responding to device rotation. Basically when I was moving the device on a Z axis in the same moment a card swipe was made the final frame of the card was wrong.

So first solution I have posted here and removing the rotation handling method made the library works well.

[tirrorex]

@silviu-geronimo like this :

`
var datas = Data

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    if let dataResult = Data.getLocalData() {
        for data in dataResult {
            datas.append(data)
        }
        self.kolodaView.reloadData()
    }
}`

My data source comes from realmswift, so after i get the data from realm with a query i append it to my data array (which i use to configure the view) and then i just reload the data.
So basically what you do is fetch the datas and then reload the koloda view which will be filled by your datasource and display properly, hope that helps.
PS : i insist on that fact that you have to set your datas before reloading the view

[xiaosongshu]

PS : i insist on that fact that you have to set your datas before reloading the view

@tirrorex are you familiar with how apps do 'lazy load' of images but with kolodaView, where they download async and then get loaded one by one when ready? reloadData reloads the whole screen, so if the user was scrolling, it pops them back up to the top of the scrollView with the new images loaded. I could have the data loaded completely, but that would mean quite a bit of wait time for the user, leading to bad UX

@silviu-geronimo commenting out clear() works for me, but then I realized it's not then passing the new data via viewForCardAt (see issue #253). I use a placeholder image then replace the placeholder images as the new data comes in from the server, but because viewForCardAt isn't being called, some of the new images don't replace the placeholder images. I'm really thinking my only option might be what @tirrorex is doing above (download everything first before reloading the data)

[marybm-dev]

I experienced the same bug and unfortunately Silviu's fix didn't work for me. I recall that this wasn't happening a few days ago so I reverted to a previous commit and incrementally applied the previous changes. I discovered that this bug was introduced when I added kolodaView.reloadData() in viewWillAppear. I've taken it out for now and will do some testing later but if anyone has idea as to why this might happen, I'm all ears!

[vojto]

For me, this worked in my viewDidAppear:

DispatchQueue.main.async {
    self.koloda.reloadData()
}

[ji0n]

I had this problem too where the first frame is having the wrong size in iPad. After looking at this thread, this worked for me. (My datasource is initialized in viewDidLoad.)

override func viewDidAppear(_ animated: Bool) {
        kolodaView.reloadData()
    }

[tonik12]

Has anyone been able to solve this? I'm currently facing it at the moment.

When I first build my view the cards are showing alright but when I come back and refresh the view (I make a new data request in viewWillAppear and reload the view on the main thread once I get the data).

[tenaz3]

Same issue

[rnkyr]

Closed via #259. Let us know if the issue still exist

[marekpivovarnik]

The problem seems to be solved but now the animation seems to be glitchy sometimes. It seems like it first appears with wrong frame but then the deck is re-layout again and it jumps to the correct frame. I have noticed that behaviour especially in case of reseting cards in deck and calling kolodaView.resetCurrentCardIndex().

I have also noticed that the swipe animation is not fluent when swiping cards fast (also kind of glitchy). Seems like swiped card appears on the top of the deck for a very short time and then disappears.

Do you guys experience similar problems?