search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.09k stars 13.51k forks source link

Ion-Slides Coverflow Warping #12077

Closed micah-williamson closed 6 years ago

micah-williamson commented 7 years ago

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ x ] 3.x

I'm submitting a ... (check one with "x") [ x ] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Using coverflow and infinite looping, the slides begin warping as it a nears the end of the set (see gif).

https://imgur.com/lYCQdej

Expected behavior: Slides do not warp.

Related code:

<ion-slides #slider class="coming-soon-posters" >

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/star-trek-movie-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/seven-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/fight-club-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/silence-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/ghostbusters-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/deadpool-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/star-wars-poster.jpg');"></div>
  </ion-slide>

  <ion-slide>
    <div class="coming-soon-poster" style="background-image: url('assets/images/the-martian-poster.jpg');"></div>
  </ion-slide>

</ion-slides>
.coming-soon-posters {
  .slide-zoom {
    height: 100%;
  }
}

.coming-soon-poster {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;

  background-size: cover;
}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 5.2.2 ios 4.1.1
    Ionic Framework                 : ionic-angular 3.4.2

System:

    Node       : v8.1.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3
jgw96 commented 7 years ago

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

jgw96 commented 7 years ago

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

hoermiller commented 7 years ago

@jgw96 I created a GIT repo with an ionic starter template and I added the described problem. After around 6 items in the array this warping effect starts to show up.

https://github.com/hoermiller/ionic-v3-coverflow-test

If you need further information or want me to test something just let me know.

My local environment

cli packages: (/usr/local/lib/node_modules)

local packages:

System:

kensodemann commented 7 years ago

Thank you for the sample code. Given that this area is getting a fair amount of rework in version 4, I am going to mark this as something to have another look at after version 4 is released.

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

ionitron-bot[bot] commented 6 years ago

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/18