www.letour.fr - The image caraousel is not displayed

[webcompat-bot]

URL: https://www.letour.fr/fr/etape-13

Browser / Version: Firefox Mobile 80.0 Operating System: Android Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items not fully visible Steps to Reproduce: The problem arise only if you click on the mountain icon. On chrome there is a kind of carousel where you can walk through mountain pass one by one either by clicking on arrow or with touch move (sometimes with an image of the pass).

If I force the desktop mode everything is fine.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[cipriansv]

Thanks for the report.

I was indeed able to reproduce the issue. After tapping the mountain icon the image carousel is not displayed in Firefox.

Tested with: Browser / Version: Firefox Nightly 200908(🦎 82.0a1-20200902095359), Chrome Mobile 85.0.4143.81 Operating System: OnePlus6 (Android 10) - 1080 x 2280 pixels (~402 ppi pixel density)

This is the web page displayed in Firefox Nightly:

And this is the web page displayed in Chrome:

Moving the issue to needsdiagnosis.

[denschub]

This is another site using the slick slider inside a complex grid and flex layout. The slick component completely explodes, and tries to render the item with width: 268436000px; transform: translate3d(-17895700px, 0px, 0px);, which isn't going to work.

There's little we can do, besides marking this as a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1316534.

[aethanyc]

I can still reproduce this issue on latest Nightly after bug 1316534 landed. The unreasonable large width used by the slick track may be the site's CSS or JS bug because the value is specified on the element, where bug 1316534 cannot help.

[karlcow]

<div
  class="slick-track"
  style="
    opacity: 1;
    width: 19440000px;
    transform: translate3d(-1296000px, 0px, 0px);
  "
>
  <div
    class="slick-slide slick-cloned"
    data-slick-index="-1"
    aria-hidden="true"
    style="width: 1296000px"
    tabindex="-1"
  >
…
</div>
</div>

This is probably related to the slick library.

When clicking on the icon mountain we get

            case 'second':
              t.slick(a.secondSlider(n)).addClass('is-loaded');
              break;

Then it goes on computing the slide deck but at a point gets rogue. It looks more like a division by 0 or something similar hitting a limit.

To visualize the slide deck it is possible to add:

.slick-list {
    width: 100vw;
}

It's not perfect but shows the graphs and probably will make it possible to understand the root cause.

[karlcow]

btw the library is https://github.com/kenwheeler/slick

[denschub]

Interestingly, this site has a completely different issue now. The content is wider than it should be.

<div class="content-container"> is a grid container, and is 310px wide in my case. It's layout is 1fr 125px 1fr. Its first and only child, <div class="content-container__main">, has

.content .content-container__main {
  grid-row: span 1;
  grid-column: 1/span 3;
}

so it should start at the first column (CSS Grid is one-indexed) and should span all three columns. Looking a bit deeper, there is a child-element <div class="heritage heritage--twoBlocks">, which itself is a two-column grid with grid-template-columns: 1fr 1fr; and a 30px gap. Inside that grid, there are two columns, and each column has <a href="..." class="actionBlock__content clearfix">, which is a flexbox element... Also, that .clearfix class has

.clearfix::after, .clearfix::before {
  content: " ";
  display: table;
}

So now we have a Grid > Grid > Flexbox > Table nest, but this doesn't even appear to be the issue. The two elements inside the grid are both 175px wide, so both take 350px space. Since the outr grid is only 320px wide, though, this causes the 30px of weird overflow.

In Chrome, the outer grid is only 310px wide, but each of those two column-thingies is 201.05px wide. And in fact, this causes issues in Chrome as well (the right column is cut off):

There is a lot of stuff broken on this site in general, in all browsers. Given this, it's probably not the best use of our time to dig out the problems itself. It's hard to know if an issue is caused by Firefox, or if this is just a side-effect of other layout-issues. I think it'd be best to get in touch with them and see if they're working on this and if they did run into any Firefox-specific issues.

@karlcow, your French is better than mine, can you attempt outreach here?

[webcompat-bot]

Generate outreach template

[karlcow]

The site is managed by Amaury Sport Organization. https://www.aso.fr/en/

I don't think they do the website in house. It's probably an external contractor.

To contact them will not be easy. Let's see.

I contacted them through https://www.asocorporatechallenges.com/EspaceInscription/Contact.aspx