www.labanquepostale.fr - “Lire Plus” overlaps article details

[softvision-oana-arbuzov]

URL: https://www.labanquepostale.fr/entreprises.html

Browser / Version: Firefox Nightly 67.0a1 (2019-02-05) Operating System: Windows 10 Pro Tested Another Browser: Yes

Problem type: Design is broken Description: “Lire Plus” overlaps article details Steps to Reproduce:

1. Navigate to https://www.labanquepostale.fr/entreprises.html
2. Observe the “Actualités” section.

Expected Behavior: No elements are overlapped.

Actual Behavior: “Lire plus” overlaps article details.

Note

1. Not reproducible on Chrome 72.0.3626.76.
2. Screenshot attached. Affected area:

   <div>
   <h2>ACTUALITÉS</h2>
   <!--cut out-->
           <a class="article-row" href="/entreprises/actualite/afte-2018.html" onclick="javascript:return tc_events_global(this, &quot;CLICK&quot;, {&quot;titre_section&quot;:&quot;ACTUALITÉS&quot;,&quot;libelle_lien&quot;:&quot;13-14 nov. Journées annuelles de l'Association Française des Trésoriers d'Entreprise&quot;,&quot;url_cible&quot;:&quot;/content/entreprises/actualite/afte-2018.html&quot;,&quot;id_composant&quot;:&quot;labanquepostale/particuliers/components/pushOfGridForNewsComp&quot;});">
               <div class="img-container">
                   <img class="pure-img" src="/content/dam/src/pme/actu/actu-afte-2018.jpg" alt="">
                   </div>
                   <p class="actu-title">13-14 nov. Journées annuelles de l'Association Française des Trésoriers d'Entreprise</p>
                   <p class="actu-text" aria-hidden="true">Les Journées annuelles de l’Association Française des Trésoriers d’Entreprise (AFTE) donnent l’occasion à la communauté des trésoriers et financiers d’entreprise de nouer des contacts, de rencontrer les banques, Fintech, éditeurs et autres apporteurs de solutions.</p>
               </a>
               <div class="next-link">
                   <a href="/entreprises/actualite.html" onclick="javascript:return tc_events_global(this, &quot;CLICK&quot;, {&quot;titre_section&quot;:&quot;ACTUALITÉS&quot;,&quot;libelle_lien&quot;:&quot;Lire plus&quot;,&quot;url_cible&quot;:&quot;/content/entreprises/actualite.html&quot;,&quot;id_composant&quot;:&quot;labanquepostale/particuliers/components/pushOfGridForNewsComp&quot;});">
       Lire plus
                       <span class="icon-angle-right"></span>
                   </a>
               </div>
           </div>

Watchers: @softvision-oana-arbuzov @softvision-sergiulogigan @cipriansv

sv;

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Also reproducible when navigating to https://www.labanquepostale.fr/particulier/produits/quotidien/comptes_services/ouvrir_compte.ouvrir.html#xtor=CS4-2205-[espace_public]-[ouvrir_compte_en_ligne]-[]-[https://www.labanquepostale.fr/particulier/produits/quotidien/comptes_services/ouvrir_compte.ouvrir.html]

[wisniewskit]

This is a weird one.

The page has been working properly for me all except once, where I refreshed and the problem reproduced. I saw this in the console (in addition to the other error the page has which seems entirely unrelated as it happens in Chrome as well):

TypeError: $(...).TruncateParagraphe is not a function  base-footer.min.js:14614:28
    <anonymous> https://www.labanquepostale.fr/etc/designs/labanquepostale/particuliers/clientlibs/base-footer.min.js:14614
    each https://banquepostale.inbenta.com/assets/js/inbenta.js?20180709:1
    each https://banquepostale.inbenta.com/assets/js/inbenta.js?20180709:1
    <anonymous> https://www.labanquepostale.fr/etc/designs/labanquepostale/particuliers/clientlibs/base-footer.min.js:14611
    i https://www.labanquepostale.fr/etc/designs/labanquepostale/particuliers/clientlibs/base.min.js:981
    fireWith https://www.labanquepostale.fr/etc/designs/labanquepostale/particuliers/clientlibs/base.min.js:1017
    ready https://www.labanquepostale.fr/etc/designs/labanquepostale/particuliers/clientlibs/base.min.js:1078
    bY https://www.labanquepostale.fr/etc/designs/labanquepostale/particuliers/clientlibs/base.min.js:1087

But the only script which references that function is this script, which broadly looks like this:

/* lots of other stuff */

$.fn.TruncateParagraphe = function(j, a, l) {
  /* snip */
};

/* lots of other stuff */

$(document).ready(function() {
    var a = $('.actu-text');
    a.each(function() {
        var c = $(this).text();
        if ($(this).closest('.parsys').length > 0 && $(this).closest('.parsys').attr('class').match('pure-u-lg-2-3') && screen.width >= 992) {
            $(this).text($(this).TruncateParagraphe(c, 125))
        } else {
            if (App.settings.isMobile) {
                $(this).text($(this).TruncateParagraphe(c, 75))
            } else {
                $(this).text($(this).TruncateParagraphe(c, 75))
            }
        }
    })
});

Which leaves me stumped. How could such a script run to the point where it does the ready call, but not end up setting the function above it?

Worse, I haven't been able to reproduce the problem a second time, so I can't exactly monitor what's happening as the script runs and the error occurs.

All I can say is that the function definitely is there when it's working, as I can see it in the console:

>> $.fn.TruncateParagraphe
<-  function TruncateParagraphe()

Whereas in the tab where it failed the one time, $.fn.TruncateParagraphe is undefined.

@denschub, maybe you have some amazing idea as to how this scenario could possibly play out? My only guess is that the server is sending a broken script sometimes, and other times is not. But I can't confirm it, because I didn't have the network devtools panel open at the time the script was being loaded, so I can't see what the response was at the time.

[denschub]

I poked at this for a bit, but I can't reproduce at all. Also, I do agree with Tom's analysis here, this shouldn't happen, unless there is a different version of the JS served, which is not defining the function for some reason. I tried multiple Firefox versions, multiple operating systems, and even multiple locations, without success, so this is impossible to diagnose. @softvision-oana-arbuzov, can you still reproduce this? If so, is there anything else you do besides loading the page?

[softvision-oana-arbuzov]

@denschub it seems that they fixed the layout and the issue is no longer reproducible.

Tested with: Browser / Version: Firefox Nightly 67.0a1 (2019-02-25) Operating System: Windows 10 Pro

I will close it.