Affichage avatars - Catégorie - Chrome

[Zarby]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : trois semaines (+ ou -)
Lien du forum : http://bloody-crown.forumactif.org/

Description du problème

Bonsoir,

Je rencontre un problème depuis quelques semaines maintenant, problème touchant des membres ayant le navigateur chrome : les avatars sur les catégories n'apparaissent plus sur Bloody Crown. (voir capture écran). Pas de problème sur Firefox.

Le code a été installé de prime abord sur mon forum test et il fonctionne parfaitement. Les avatars s'affichent bien. J'ai copier/coller le code du forum test au forum de BC et cela n'a rien changer. J'ai décocher et cocher la case qui affiche les avatars, et cela n'a rien changer. J'ai vidé les données de navigations de mon navigateur et cela n'a rien changé.

Je ne comprends donc pas d'où vient le problème, car sur mon forum test, tout est ok mais pas sur BC. Et les codes sont identiques.

Je me tourne donc vers vous pour trouver une solution autre que de changer tous les codes et faire disparaitre les avatars pour tous, qui rend le tout plus esthétique.

Merci par avance !

___________________ index_box

Code:

<link href="https://fonts.googleapis.com/css2?family=Josefin+Slab&display=swap" rel="stylesheet">
<!-- BEGIN catrow -->
    <div class="CatFd">
      <!-- BEGIN tablehead -->
        <div class="CatGdTitFd">{catrow.tablehead.L_FORUM}</div>

        <div class="CatFo" id="{catrow.tablehead.ID}">
    <!-- END tablehead -->

    <!-- BEGIN forumrow -->
            <div class="AlignDiv">
            <div class="CatP4">
                <div class="CatStatut"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                </div>
                <div class="CatP4LPC"> 
                    <div class="CatLastP"><!-- BEGIN switch_topic_title --><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br /><!-- END switch_topic_title -->{catrow.forumrow.USER_LAST_POST}
                        <div class="CatChif">{catrow.forumrow.POSTS} messages, {catrow.forumrow.TOPICS} sujets.
                        </div>
                    </div>
                </div>
            </div>
            </div>
            <div class="AlignDiv">
            <div class="CatP3"> <!-- BEGIN avatar --><div class="CatAva">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
            <!-- END avatar -->
              </div>
            </div>
            <div class="AlignDiv">
                <div class="CatP1">
                <div class="CatTitFo"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></div>
                <div class="CatSoFo"><div class="CatSautLigne">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
            </div>
            </div>
            <div class="AlignDiv">
            <div class="CatP2">
                  <div class="CatDes">{catrow.forumrow.FORUM_DESC}</div>
            </div>
            </div>               
        </div>
    <!-- END forumrow -->

    <!-- BEGIN tablefoot -->
          <div class="CatCred">(c) Kanala</div>
    <!-- END tablefoot -->
    </div>
<!-- END catrow -->

<!-- BEGIN switch_on_index -->

<!-- END switch_on_index -->

  <script type="text/javascript">$('.CatSautLigne').each(function(){$(this).html($(this).html().replace(/,/g,"<br />"));});</script>

_________________ CSS associé

Code:

/********************************-- Codage des catégories du forum --**********************/
.CatFd{
width:900px;
text-align:center;
background-color: #F0F0F0;}

.CatGdTitFd{background: url(https://i.ibb.co/FxwwbNM/fondcat-Tt.png);transition: 0.7s;}

.CatGdTitFd h2 {
font-family: 'Josefin Slab', serif;
font-size: 25px !important;
text-transform: uppercase;
border-bottom:3px solid #E7BA55;
transition: 0.7s;
padding:10px;
color:#fff;}

.CatGdTitFd h2:hover{filter: invert(1);
-webkit-filter: invert(1);
color:#C74848;
letter-spacing: .2rem;}

.CatFo{border-top: 20px solid #DADADA;margin-top:-20px;}

.CatP1{
background-color: #DADADA;
width:180px;
margin-left:20px;
margin-top:10px;
padding:5px;}

.CatTitFo{
border: 1px solid #000;
margin-bottom:5px;
font-family: 'Josefin Slab', serif;
text-transform: uppercase;
background: rgb(122,121,121);
background: linear-gradient(322deg, rgba(122,121,121,1) 0%, rgba(71,52,52,1) 25%, rgba(64,63,63,1) 50%, rgba(91,68,68,1) 78%, rgba(64,53,53,1) 100%);
color:#fff;
padding:2px;}

.CatTitFo a{
color:#fff;
text-decoration: none;
transition: 0.7s;
font-size:12px;} 

.CatTitFo a:hover{color:#E7BA55;text-decoration: none;} 

.CatSoFo{
height: 70px;
overflow:auto;
border : 1px solid #000;
padding:5px;
border-top:1px solid #E7BA55;}

.CatSoFo a::before{content: "→ ";color:#E7BA55;}

.CatSoFo a::after{content: " ←";color:#E7BA55;}

.CatP2{
background-color: #DADADA;
width:320px;
margin-left:10px;
margin-top:10px;}

.CatDes{
text-align:justify;
width:310px;
height: 100px;
overflow:auto;
padding:5px;
font-size:12px;
border-bottom:1px solid #E7BA55;}

.CatStFo{
text-transform: uppercase;
font-family: 'Josefin Slab', serif;
color:#fff;
padding-top:2px;
padding-right:5px;
padding-left:5px;
background: rgb(156,170,168);
background: linear-gradient(219deg, rgba(156,170,168,1) 0%, rgba(101,132,133,1) 25%, rgba(64,63,63,1) 50%, rgba(66,117,117,1) 78%, rgba(65,113,106,1) 100%);
font-size:12px;
border-bottom:1px solid #E7BA55;}

.CatP3{
width:90px;
margin-left:10px;
margin-top:10px;}

.CatAva img{
clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
height:100px;
border:1px solid #E7BA55;
transition: 1.3s;}

.CatAva img:hover{filter: invert(1);-webkit-filter: invert(1);clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}
 
.CatP4{
background-color: #DADADA;
margin-left:10px;
width:180px;
margin-right:20px;
margin-top:10px;
padding:5px;}

.CatStatut{border: 1px solid #000;
  margin-bottom:5px;
width:180px;}

.CatStatut img{width:180px;height:15px;}

.CatP4LPC{
width:170px;
height: 70px;
border : 1px solid #000;
padding:5px;
border-bottom:1px solid #E7BA55;}

.CatLastP{ font-size:11px;}

.CatChif{
margin-top :10px;
font-size:11px;
width:160px;
font-family: 'Josefin Slab', serif;
text-transform: uppercase;
background: linear-gradient(322deg, rgba(122,121,121,1) 0%, rgba(71,52,52,1) 25%, rgba(64,63,63,1) 50%, rgba(91,68,68,1) 78%, rgba(64,53,53,1) 100%);
color:#fff;
padding:2px;
border : 1px solid #000;}

.CatCred{
font-size:5px;
text-align:right;
text-transform: uppercase;
border-bottom: 20px solid #DADADA;
padding-right:20px;
padding-top:10px;}



[chattigre]

Bonsoir,

Je ne reproduis pas le souci de mon côté sous Google Chrome...

Si vous avez des extensions, testez en les désactivant pour voir si le problème persiste.
Je vous invite aussi à tester sous Google Chrome avec un autre appareil si vous en avez la possibilité

Bonne journée

[MlleAlys]

Bonjour,
Pour ma part je reproduis bien le problème d'affichage sur Chrome.
Le souci a l'air de venir de la propriété clip-path : Si je la retire l'avatar apparait.... Mais si je la remets, l'avatar reste affiché Donc je me dis que ce n'est pas la propriété elle même mais peut être l'ordre de prise en compte de celle-ci ?
Essayez peut être dans le css de mettre cette propriété plus bas, je ne sais pas si ça peut venir de là mais sait-on jamais, ça ne coûte pas grand chose d'essayer !
Localisez :

Code:

.CatAva img{
clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
height:100px;
border:1px solid #E7BA55;
transition: 1.3s;}

Et modifiez ainsi :

Code:

.CatAva img{
height:100px;
border:1px solid #E7BA55;
clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
transition: 1.3s;}

Enregistrez et actualisez ?

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.