1169927 - Image slider on TripAdvisor is broken

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Marco Castelluccio [:marco]]

Attachment: Firefox

There are two problems:
1) Images aren't shown correctly (in Chrome they are).
2) If you don't swipe slowly enough, the slider stops working.

Nexus 5 with Android 5.1.1.

Comment 1

[Marco Castelluccio [:marco]]

Attachment: Chrome

Comment 2

[Marco Castelluccio [:marco]]

Attachment: Broken slider

Comment 3

[Kevin Brosnan [Ex-Mozilla]]

I can reproduce issue 2 in comment 0. Though it feels more like an evangelism issue. To clarify comment 0 in Firefox for Android visit http://www.tripadvisor.com/Attraction_Review-g186338-d187555-Reviews-British_Museum-London_England.html and quickly swipe through the images. The gallery brakes before you get to the last picture. If you swipe slowly the images load. Mike would you have a look?

Comment 4

[Mike Taylor [:miketaylr]]

For the first problem, 

> 1) Images aren't shown correctly (in Chrome they are).

This is the "max-width: 100% doesn't work as expected in td or display: table-cell" problem, aka Bug 975632.

The containing <div class="cent"> is set to diplay: table-cell, and then we have:


#BODYCON img {
  max-width: 100%;
} 

To work around this, they can change max-width to "width: 100%" in the #BODYCON img selector.

Looking into the broken gallery now.

Comment 5

[Mike Taylor [:miketaylr]]

The remote debugger doesn't want to work for me ATM, but I see the following in the console, after I break the gallery:

TypeError: s is null ta-mobilephotos-c-v21803401573b.js:1:2720

The animation would certainly be less janky if they used an unprefixed style here:

> $('BODYCON').style.WebkitTransition = 'left .3s'

Let's move it to TE.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Given the dependency, maybe worth testing if this was fixed by bug 823483?

Comment 7

[Mike Taylor [:miketaylr]]

Using the STR from Comment 3, this is indeed fixed now.