iPhone problem with gallery

batarin.nali's Avatar

batarin.nali

04 Jan, 2013 03:36 PM

Hi!

Have a look at this...
http://www.nali-group.ru/catalog/landscape_design/portfolio.php
When you touch the thumbnails on an iphone, they just stick to your gestures... So, the scrolling and zooming of the page just dies. Whatever you do, it only has an effect on the thumbnails.
Is it my stupidity? Or mb a lag?

Thnaks!

  1. Support Staff 1 Posted by Dmitry Semenov on 05 Jan, 2013 12:03 AM

    Dmitry Semenov's Avatar

    Hi,

    It blocks only horzizontal gesture, vertical and zoom should work properly. Can you please describe your issue more particularly?

    You can disable touch completely via options, if you don't need it.

    Dmitry

  2. 2 Posted by batarin.nali on 05 Jan, 2013 12:10 AM

    batarin.nali's Avatar

    So, description:
    When you do something on the page - everything is ok. When you touch, or drag any of the thumbnails on the bottom of the gallery - everything gets blocked (zoom, vertical and horizontal movement).
    Disabling with the commands via options doesn't help. All it does - takes away the drag ability in the big pictures. The thumbnails still get draged and lock movement.

  3. Support Staff 3 Posted by Dmitry Semenov on 05 Jan, 2013 12:25 AM

    Dmitry Semenov's Avatar

    Weird, can't repeat this and haven't heard about such issue. What version of iOS are you using?

    Dmitry

  4. 4 Posted by batarin.nali on 05 Jan, 2013 12:30 AM

    batarin.nali's Avatar

    v 6.0.1
    Well, the banner I have up top the page did the same thing, so I disabled it. But can't do it the same way in your slider...
    Strange you can't see it. All you need to do is drag the thumbnails, or click them, and then zoom out.
    It works on android just fine. Don't know why iPhone does this. By the way, it did it too on iOS 4.

  5. 5 Posted by batarin.nali on 05 Jan, 2013 12:44 AM

    batarin.nali's Avatar

    Moved the gallery a bit to a different place. Have a look.
    http://nali-group.ru/catalog/landscape_design/the-city-square-nali.php

  6. Support Staff 6 Posted by Dmitry Semenov on 05 Jan, 2013 08:11 AM

    Dmitry Semenov's Avatar

    I still can't repeat this, it would be great if you record short video.

    Also:

  7. 7 Posted by batarin.nali on 05 Jan, 2013 09:27 AM

    batarin.nali's Avatar

    Video is attached.
    2 jquerys? I will have a look and write to you if it helped.
    The version of the slider was downloaded only 2 days ago. So... I think it shoulb be the latest.
    Ya, I will take that script away. I'm still working of customising everything.
    Thanks =)

  8. Support Staff 8 Posted by Dmitry Semenov on 06 Jan, 2013 09:18 AM

    Dmitry Semenov's Avatar

    Thanks a lot. I'd be also super-grateful if you tell me can you repeat issue on this gallery - http://dimsemenov.com/plugins/royal-slider/gallery/

    CodeCanyon does not always have latest version of main RoyalSlider JS file, due to long review time.

    Dmitry

  9. 9 Posted by batarin.nali on 06 Jan, 2013 09:25 AM

    batarin.nali's Avatar

    The one on your site works perfect! I always test the demos on every device before buying something. That is why I was surprised to encounter this issue.
    Wow, couldn't expect codecanyon to have old verdions. I'll update the the files and tell you if it helped.

  10. 10 Posted by ben on 27 Jan, 2016 04:37 PM

    ben's Avatar

    Hi I have exactly the same issue.
    Jquery 1.11.2
    jquery.royalslider v9.5.7

    dom is like this (uses 3 - 5 images)
    <div class="pdp-royal royalSlider rsDefault">
    {% if product.images %}
      {% for image in product.images %}
        <a href="{{ image | product_img_url: 'grande' }}" class="rsImg"></a>
      {% endfor %}
    {% endif %}
    </div>

  11. 11 Posted by ben on 27 Jan, 2016 04:41 PM

    ben's Avatar

    this is my RS setup (coffee)

        $rs.royalSlider
          imageScalePadding: 0
          slidesSpacing: 0
          controlNavigation: 'none'
          imageScaleMode: 'fill'
          navigateByClick: false
          allowCSS3: false
          minSlideOffset: 0
          arrowsNavHideOnTouch: true
          transitionSpeed: 300
          numImagesToPreload:2
          loop: false

  12. Support Staff 12 Posted by Dmitry Semenov on 27 Jan, 2016 10:20 PM

    Dmitry Semenov's Avatar

    Hello Ben,

    What size of images do you use? Can you provide link to the demo page?

    Dmitry

  13. 13 Posted by ben on 27 Jan, 2016 11:52 PM

    ben's Avatar

    http://jillstuart.myshopify.com/collections/ready-to-wear/products/ada-blouse-nude

    password: cake123!

    I've tried with tiny images, all size images.

    this is all i run on the RS

    resizepdpRs = ->
    $rs = $('.pdp-royal')
    $rsWidth = $(window).width()
    $rsHeight = $rsWidth * 1.4
    $rs.height($rsHeight)
    pdpRoyal = ->
    $rs = $('.pdp-royal')
    if $rs.length
    resizepdpRs()
    $rs.royalSlider
    imageScalePadding: 0
    slidesSpacing: 0
    controlNavigation: 'none'
    imageScaleMode: 'fill'
    navigateByClick: false
    allowCSS3: false
    minSlideOffset: 0
    transitionSpeed: 300
    numImagesToPreload:2
    arrowsNavAutoHide: false
    loop: false

  14. Support Staff 14 Posted by Dmitry Semenov on 28 Jan, 2016 04:49 PM

    Dmitry Semenov's Avatar

    Try adidng styles:

    -webkit-backface-visibility:hidden;
    -webkit-transform: translateZ(0);
    

    to the root element of slider and to the "back" button that overlaps it, looks like a renderingissue.

  15. 15 Posted by ben on 29 Jan, 2016 07:56 PM

    ben's Avatar

    Thanks Dmitry

    Tried that but it doesn't work.

    Sent from my iPhone 6

  16. Support Staff 16 Posted by Dmitry Semenov on 29 Jan, 2016 08:23 PM

    Dmitry Semenov's Avatar
    • Do you have a specific reason why allowCSS3 option is set to false? Try reverting it back to true.
    • If above fix won't help, I can only suggest to create a reduced test case – temporarily remove all js/css/html code not related to slider, until you find the element that causes the issue.

    Dmitry

  17. 17 Posted by Gokmen Kurtoglu on 01 Jul, 2017 03:39 PM

    Gokmen Kurtoglu's Avatar

    Hi Dmitry! i have a problem like you discuss above.
    This is my friends site;
    http://www.emreparlak.com/
    in mobile ios10 touch works only for first slide. After first slide it stops working.
    i use v1.0.5 version. Any help?
    thanks!

  18. Support Staff 18 Posted by Dmitry Semenov on 01 Jul, 2017 07:13 PM

    Dmitry Semenov's Avatar

    @Gokmen Kurtoglu, Hello, have you tried solutions above, e.g. forcing separate layer like so:

    .royalSlider .rsSlide,
    .royalSlider img {
        -webkit-transform: translateZ(0);
       will-change: opacity;
    }
    

    Also, stuff like expanding detail over the slider can theoretically cause such issues, try removing it temporarily or creating a reduced test case.

    Dmitry

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac