Touch drag moves entire browser (mobile) when slides contain flex box or tables
-
Hi – I am using SA slider for a slide show with a 2:1 design for each slide with Text on the left-hand side and an image to the right. Everything works fine on the desktop and mobile – EXCEPT for TOUCH DRAG: On all mobile browsers, IF ONE TOUCH DRAGS a SLIDE TO THE LEFT, the entire PAGE is moved. It is worse on SAFARI/IPAD but also present on ANDROID/CHROME-FF-OPERA. There is obviously a quite large OVERFLOW. At times it works for a couple of swipes even on mobile browsers but eventually the TOUCH DRAG ERROR kicks in.
Setting “Overflow: hidden !important” in one of the parent divs (a recommendation that one stumbles across frequently) didn’t solve my problem regardless where I put it in my CSS code. I tried a myriad of other seetings recommended on the internet but to no AVAIL. It doesn’t matter if the slider is in the header or in the body. SA slider does not exhibit the TOUCH DRAG problem with the example silder that comes along with SA SLIDER (and which desn’t use flexbox or table).
I would be really grateful for a hint.
Best wishes to all,
AndreasThe page I need help with: [log in to see the link]
-
Can you try this test – put the slider on another full-width, plain page, with just plain ‘lorum ipsum’ text below and see what happens. This test will isolate whether its an issue with the SA slider or whether its the page content below is clashing (maybe affecting touch-drag events)
ok, found it after many hours of searching… It is/was a script provided by PINTEREREST which overlays IMAGES of a site with a small PIN that allows a VISITOR to “pin” the site’s respective IMAGE directly to the PINBOARD of his own PINTEREST account (you can watch the phenomenon (for limited time) here: https://mybanto.de/test-a-slida – on any mobile browser). I had this script site-globalized so every page/post of my site was impacted. I found it out after hours of searching – when I accidentally saw that small nasty PIN in the absolute rightmost grey-background “nowhere-area” of the swiped container (while testing with slides that contained just one simple image each and which exhibited the same behaviour of moving the entire browser container instead of only the slides). As already said, no table or flexboxes are necessary to cause the issue (the title of my support enquiry is misleading in this respect as it is enough that the slides contain images to cause the overflow in conjunction with the PINTEREST SCRIPT). A quick search on the internet “PINTEREST SCRIPT OWL CAROUSEL INTERFERENCE” delivered no results.
Summary:
1. The official Pinterest PIN script causes an overflow in conjunction with (probably) the OWL CARUSEL and (in consequence) with SA SLIDER on MY SITE.
2. I suspect that this is a general problem and not a specific issue of my site only (I use OCEANWP) or caused by maybe another plugin that I USE or one of my custom CSS tweaks.
3. I have no idea as to how many people are impacted or are potentially impacted by the same issue.
4. Many “hobby site”-admins like myself might accept the issue as it is present only on mobile browsers and as one can still swipe the sildes using the arrows.
5. I have to discard the PINTEREST SCRIPT or the SA SLIDER as I have no idea how I can make SA SLIDER “PINTEREST PIN-SCRIPT-resistant”.Thanks a lot to the Plugin Author for this fantastic Tool!
Best wishes & thanks for your help, Andreas
P.S: The pinterest script in question. To reproduce, just add it to your post/page with your slider.
<script async defer data-pin-hover=”true” data-pin-round=”true” src=”//assets.pinterest.com/js/pinit.js”></script>Well, I didn’t resolve this. I found the reason but the issue persists as I have to switch off either the PINTEREST-SCRIPT or SA SLIDER. As the PINTEREST-SCRIPT is potentially very common (maybe I am wrong on this point) it is a potential issue also for more people and/or any plugin author (or maybe rather for pinterest if it is their crappy code that is responsible). I am unsure, though, whether this would justify any effort on your or any pluging developper’s side (probably not) – so I tend to say that this issue is my personal bad luck and with this leave it at that.
Best wishes!ok, ultimately found also a solution: add nopin attribute like
to each and evey image in the slider. silder images will become non-pinnable but thats the trade-off. Sayonara.Final comment: It is one of probably several bugs in the script “pinit.js” provided by Pinterest which miscalculates the position of the PIN in certain conditions, e.g. when parent divs have a overflow property or with cropped images. Many Sliders or Gallery or carousel plugins (and their users and developers) therefore make for good victims of this annoying bug.
After having learnt what strings to feed to the search engine I’ve found quite a few issues related to the problem although google is trying its best to avoid bug report pages even if you include “bug” in you search term. Pinterest developers DO KNOW about the bug since years but do not appear to give a f**k. I am sure there are quite some poor souls out there having to struggle with strange effects due to this crappy Pinterest sh*it software.
- The topic ‘Touch drag moves entire browser (mobile) when slides contain flex box or tables’ is closed to new replies.
