975467 - bolido.com Web slideshow not transitioning properly

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[[e-mail]]

User Agent: Mozilla/5.0 (Android; Mobile; rv:28.0) Gecko/28.0 Firefox/28.0 (Nightly/Aurora)
Build ID: 20140218120517

Steps to reproduce:

1-Go to this website:
http://www.bolido.com/2014/02/tesla-retrasa-produccion-del-suv-electrico-model-x-hasta-2015/

2-Click on the slideshow arrows


Actual results:

It moves several images at once or goes back to the beginning


Expected results:

Go to next or previous image

Comment 1

[Teodora Vermesan (:TeoVermesan)]

What device and firefox version are you using?

Comment 2

[[e-mail]]

(In reply to Teodora Vermesan (:TeoVermesan) from comment #1)
> What device and firefox version are you using?

Samsung Galaxy S4 i9505, Firefox Beta for android 28.0

Comment 3

[Teodora Vermesan (:TeoVermesan)]

On Chrome and latest Nightly the behavior is that when tapping the arrows, it moves several images.
Please look at the following video: https://www.youtube.com/watch?v=ehdduah3k6U&feature=youtube_gdata_player
Is this happening to you? If so, it is expected.
If not, can anyone with a Samsung Galaxy S4 investigate this?

Comment 4

[[e-mail]]

I mean the hidden keys over the picture itself, and the picture index top right. See attachments.

Comment 5

[[e-mail]]

Attachment: SCR_20140525_111035_avidemux.mp4

Chrome and firefox on slideshow transitions.

Comment 6

[[e-mail]]

Bugzilla video viewer says it's corrupt but it's not, just download it.

Comment 7

[[e-mail]]

Attachment: slideshow index error.jpg

Comment 8

[Hallvord R. M. Steen [:hallvors]]

another touch event prevent default issue?

Comment 9

[Mike Taylor [:miketaylr]]

Attachment: galleria.png

@Hallvord, possible. I suspect something else is going haywire with the "-/17" current slide counter and slide positioning calculatoin. If you inspect the DOM and look at div.galleria-images, it's being constantly translate3d'd to ridiculous lengths (see attached image).

Comment 10

[Karl Dubost💡 :karlcow]

I confirm. Tested on Firefox Android on other pages with the slideshow.

Comment 11

[Karl Dubost💡 :karlcow]

The click is handled by in all.min.js 
line 12004 and it's working quite well.

  c.Fastclick = function () {
    var a = /iP(ad|hone|od)/.test(navigator.userAgent),
    d = a && /OS 4_\d(_\d)?/.test(navigator.userAgent),
    f = a && /OS ([6-9]|\d{2})_\d/.test(navigator.userAgent);
    return {

…
}

Interesting fact. The slideshow is working very well when in landscape mode. So yes probably something crazy about minimal width


The value is set in Line 12171:
f ? a.MozTransform = a.webkitTransform = 'translate3d(' + d.pos + 'px,0,0)' : a.left = d.pos + 'px'

Comment 12

[Karl Dubost💡 :karlcow]

Hmm ok. tried again and can't make it work in landscape mode anymore. So I guess it was a glitch of my breakpoints.

Comment 13

[Mike Taylor [:miketaylr]]

(In reply to Hallvord R. M. Steen from comment #8)
> another touch event prevent default issue?

Good intuition Hallvord. :) Looking closer at this, part of the fastclick code that Karl pointed out,

onTouchEnd: function(a) {
    var b;
    b = this.targetElement;
    if (!this.trackingClick) return !0;
    if (200 > a.timeStamp - this.lastClickTime) return this.cancelNextClick = !0;
    this.lastClickTime = a.timeStamp;
    this.trackingClick = !1;
    this.trackingClickStart = 0;
    f && (b = a.changedTouches[0], b = m.elementFromPoint(b.pageX - e.pageXOffset, b.pageY - e.pageYOffset));
    b.tagName.toLowerCase();
    a.preventDefault();
    this.sendClick(b, a);
    return !1;
},

If you commment out "this.sendClick(b, a);", only a single click event fires. As is, the slide is moving by two images.

I'm not able to reproduce the crazy infinite translate3d that I saw yesterday, though something else is still broken with the "-/17". However, that happens on Chrome mobile as well. IMO the real compat issues here is not canceling synethetic click events when calling e.preventDefault() from within a touchend event.

Comment 14

[[e-mail]]

(In reply to Mike Taylor [:miketaylr] from comment #13)

> However,
> that happens on Chrome mobile as well. IMO the real compat issues here is
> not canceling synethetic click events when calling e.preventDefault() from
> within a touchend event.

Probably depends on screen dimensions. On the Galaxy S2 (480x800) you can see "-/17" but on the Galaxy S4 (1080x1920) it works as intended (see attached MP4).

Comment 15

[[e-mail]]

(In reply to [e-mail] from comment #14)

> Probably depends on screen dimensions. On the Galaxy S2 (480x800) you can
> see "-/17" but on the Galaxy S4 (1080x1920) it works as intended (see
> attached MP4).

Talking about chrome for android here

Comment 16

[Karl Dubost💡 :karlcow]

Tested today. The issue is still here.
Bug 1016480 is still open.

Comment 17

[Karl Dubost💡 :karlcow]

fixed