Incorrect amount of scrolling of Carousel



  • Hello,
    I noticed that the amount of scrolling is incorrect with Carousel scaled by transform.
    In the sample below, correct scrolling amount of 750px is required. However, only 563px has been scrolled.

    <H1>Transform</H1>
    <div style="transform: scale(0.75)">
    <ons-carousel style="width: 750px; height:100px;" swipeable overscrollable auto-scroll>
      <ons-carousel-item style="background-color: red;">
        ONE
      </ons-carousel-item>
      <ons-carousel-item style="background-color: green;">
        TWO
      </ons-carousel-item>
      <ons-carousel-item style="background-color: red;">
        THREE
      </ons-carousel-item>
    </ons-carousel>
    </div>
    


  • Finally, I modified like below in HorizontalModeTrait. :smile:

         _getElementSize: function _getElementSize() {
           if (!this._currentElementSize) {
    //       this._currentElementSize = this.getBoundingClientRect().width;
             this._currentElementSize = this.clientWidth;
           }
    
           return this._currentElementSize;
         },
    

Log in to reply