1044704 - Garmin shopping site does not display carousel

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Kevin Brosnan [Ex-Mozilla]]

The carousel for the Garmin shopping site does not display on Firefox for Android. I can reproduce this using the following url https://buy.garmin.com/en-US/US/into-sports/cycling/edge-1000/prod134491.html

I can reproduce this on Desktop using the Firefox for Android UA. Using Firefox for Android with Chrome Mobile UA still encounters the same issue.

Comment 1

[Karl Dubost💡 :karlcow]

The caroussel is provided by mobify

There is
.x-product-html #x-product-carousel .m-carousel-inner {
    padding-left: 50%;
}

if we put the value to zero every images appear. any other values make them disappear.


Some messages received in the console.

13:40:38.702 GET https://buy.garmin.com/en-US/US/into-sports/cycling/edge-1000/prod134491.html [HTTP/1.1 200 OK 173ms]
13:40:38.834 An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing prod134491.html:11
13:40:38.970 mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create mobify.js:1
13:40:39.006 Use of attributes' nodeValue attribute is deprecated. Use value instead. mobify.js:1
wyciwyg://2/https://buy.garmin.com/en-US/US/into-sports/cycling/edge-1000/prod134491.html
13:40:39.062 mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

Some fonts are missing too.

Comment 2

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

The dimension of the carousel container (.m-carousel-inner) is per dev tools 8947848x150 - so it's not hard to understand why applying a 50% padding (or even 0.1% padding) moves the elements inside far off the screen. What I don't understand is why the element is so wide in Gecko but not in WebKit..

Comment 3

[Karl Dubost💡 :karlcow]

The element is initialized by 
  i = function (e, t) {
    this.setOptions(t),
    this.initElements(e),
    this.initAnimation(),
    this.initOffsets(),
    this._enableAnimationAfterUpdate(),
    this.bind()
  };


setOptions doesn't do anything interesting for the width.

Then it calls initElements (after a trip to Zepto)

The first time when it hits in

  i.prototype.initElements = function (t) { …:

the line:

    if (this.element = t, this.$element = e(t), this.$inner = this.$element.find('.' + this._getClass('inner')), this.$items = this.$inner.children(), this._count = this.$items.length, this.options.loop) {

The value for this.element.clientWidth is 17895698.

Comment 4

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

I've seen similar issues caused by missing flexbox styling, meaning that certain elements are display: block by default and as wide as their parents. So when the script tries to calculate the *sum* width of many such elements it ends up with a way too large number. Might be it.

Comment 5

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

Analysis TBC

Comment 6

[Karl Dubost💡 :karlcow]

This has been Fixed either in Garmin or Firefox. But this is working. 
Closing as worksforme.