Bonjour à tous,
J'ai un souci avec un fichier Html mettant en œuvre les "marquee" ( je sais, pas dans la norme explicite mais toujours supporté par les navigateurs ).
Ou plutôt je n'avais pas de souci avec Firefox sur Windows 10 .
J'ai deux systèmes, l'un sous W10 et l'autre sous W11.
Sur les 2 la version de Firefox est 112.0 .
Sur W10, les marquees défilent correctement, tout fonctionne comme attendu , les bandeaux font bien le va et vient .
Sur W11, les marquees défilent 1 fois puis l'écran reste figé ....
Je signale que les marquees fonctionnent correctement sous Chrome ou Edge .
Contenu du fichier Html ( vous n'aurez pas les images mais les marquees sont là .... ):
Code : Tout sélectionner
<!-- Corps Principal -->
<!DOCTYPE HTML>
<html lang="fr">
<meta charset="iso-8859-15">
<!-- Debut Style -->
<style type="text/css">
html,body {
height:100%;
width:100%;
padding:0;
margin:0;
text-align:center;
vertical-align:middle;
box-sizing:border-box;
font-family:Verdana;
font-size:100%;
font-weight:bold;
background:yellow;
}
:root {
--Height:auto;
--liwidth:calc( 100% / 1 );
--FsAbc:0vw;
--FsPartie:0vw;
}
li {
height:auto;
width:100%;
padding:0;
margin:auto;
text-align:center;
display:block;
}
li.Partie {
height:100% ;
padding:0;
margin:0;
text-align:center;
border:2px solid White;
}
li.Abc {
height:var(--Height);
width:var(--liwidth);
flex-direction:column;
border:1px solid white;
}
marquee {
height:100%;
font-size:350%;
color:Black;
display:flex;
flex-direction:column;
justify-content:center;
overflow-y: auto;
}
marquee.Partie {
color:Black;
text-align:center;
box-sizing:border-box;
}
span.Partie {
display:flex;
height:calc( 100% - 56px ); /* - hauteur entete */
}
table {
width:100%;
border:solid;
border-collapse:collapse;
}
td {
border-style:none solid;
text-align:center;
padding:0px 15px;
}
table.Partie {
border:none;
}
td.Partie_T {
border:1px solid white;
font-size:calc(var(--FsPartie) / 3);
}
td.Partie_N {
border:none;
font-size:calc(var(--FsPartie) / 3);
}
td.Partie_E {
border:none;
font-size:var(--FsPartie);
font-style:italic;
}
td.filler {
border:none;
width:50%;
padding:0;
}
td.small {
font-size:1.5vw;
padding:25px 15px;
word-wrap:break-word;
}
td.no {
font-size:180%;
padding:1px 1px;
background:RGB(64,49,81);color:RGB(255,255,255);
border:solid white;
}
td.eq {
font-style:italic;
}
td.z {
padding:1px 1px;
}
tr.eq {
border-style:solid solid;
padding:0;
}
tr.eq:nth-child(odd) { background:RGB(204,192,218);color:RGB(0,0,0) }
tr.eq:nth-child(even) { background:RGB(228,223,236);color:RGB(0,0,0) }
tr.terrain td {
font-size:calc( var(--FsAbc) * 0.5 );
border-color:black;
}
tr.equipe td {
font-size:Var(--FsAbc);
border-color:black;
}
tr.equiNo td {
font-size:1vw;
font-style:italic;
font-weight:normal;
line-height:90%;
border-color:black;
}
.entete {
height:2.8vw;
width:100%;
vertical-align:middle;
font-size:2vw;
color:white;
}
.entetec {
height:2.8vw;
width:100%;
vertical-align:middle;
font-size:2vw;
background:RGB(64,49,81);color:RGB(255,255,255);
}
.entete2 {
height:2vw;
width:100%;
font-size:1.5vw;
color:white;
display:flex;
flex-direction:column;
vertical-align:middle;
justify-content:center;
}
.Attente {
height:var(--Height);
margin:0;
padding:0;
display:flex;
box-sizing:border-box;
justify-content:center;
text-align:center;
vertical-align:middle;
}
header {
font-size:1.8vw;
height:4vh;
}
iframe {
display:none;
}
img {
position:sticky;
}
footer {
position:absolute;
bottom:0;
font-size:1vw;
width:100%
}
input.H {
font-weight:bold;
font-size:100%;
border:none;
background:yellow;
}
ul.oeil {
padding:0;
margin:0;
width:8%;
font-size:45%;
float:right;
color:white;
}
</style>
<!-- Fin de Style -->
<title>Tirages Gc Concours</title>
<body>
<header>
<form name="formheure" onsubmit="0">
<input class=H name="Heure1" size=2 > mardi 11 avr 2023
<ul class="oeil" style="background:green">Surveillance<br>en cours</ul>
</form>
</header>
<!-- Bloc pour l'écran d'attente-->
<ul style="display:flex;flex-direction:column ;padding: 0 ;margin: 0; height: calc(100% - 6vh) ">
<ul class=Attente Style="height:15%;font-size:1.5vw ;width:100%">
<li style="background:RGB(255,0,0);margin-top:0">
<marquee direction=Left scrollamount=5
style="width:90%;color:RGB(255,255,255);margin: auto auto">
En attente de Gestion Concours
</marquee>
</li>
</ul>
<ul class=Attente style="height:70%; width:100%;">
<img src="file:\\\D:\Users\François\Documents\Club\Suivi Concours\Images\JoueurPétanque.gif" style="height:55%;top: 35%;width:25%;float:left;">
<img src="file:\\\D:\Users\François\Pictures\logo_Ph.jpg" style="height:100%;width:80%;border-radius: 50%">
<img src="file:\\\D:\Users\François\Documents\Club\Suivi Concours\Images\JoueurPétanque.gif" style="height:55%;top: 35%;width:25%;float:right;transform:rotateY(-180deg);">
</ul>
<ul class=Attente Style="height:15%;font-size:1.5vw ;width:100%">
<li style="background:RGB(0,102,0);">
<marquee direction=Left behavior=alternate scrollamount=3
style="width:90%;color:RGB(255,255,255);margin: auto auto ">
N'oubliez pas de vous inscrire avec vos licences
</marquee>
</li>
</ul>
</ul>
<!-- Fin de Bloc pour l'écran d'attente -->
<footer>
<em>La Pétande Hilairoise ©</em>
<audio controls autoplay hidden="hidden">
<source src="file:\\\D:\Users\François\Documents\Club\Suivi Concours\Musique\Bienvenue.webm" type="audio/mpeg">
</audio>
</footer>
<!-- Début des scripts -->
<script>
// Le contenu entier de la page affichée est mis en mémoire dans la variable Old_Source
var Old_Source;
var XMLHttp = new XMLHttpRequest();
XMLHttp.open("GET",window.location.pathname);
XMLHttp.onreadystatechange=function() { if (XMLHttp.readyState==4) { Old_Source = XMLHttp.responseText ; } };
XMLHttp.send(null);
// Démarre la surveillance toutes les 2 secondes
window.setInterval("Check_Update()",2000);
// Rafraichit l'heure toutes les minutes
Heure_Update();
window.setInterval("Heure_Update()",60000);
function Check_Update() { // On vérifie si la page a changé
var New_Source;
var XMLHttp = new XMLHttpRequest();
XMLHttp.open("GET",window.location.pathname);
XMLHttp.onreadystatechange=function() {
if (XMLHttp.readyState==4) {
New_Source = XMLHttp.responseText ;
if ( New_Source != Old_Source ) { // la page a changé, on la recharge
console.log("on recharge tout ");
window.location.reload();
}
}
}
XMLHttp.send(null);
}
function Heure_Update() {
var Maintenant = new Date();
document.formheure.Heure1.value = Maintenant.toLocaleTimeString('fr-FR', {hour: '2-digit', minute: '2-digit'}) ;
}
function Tempo_Marquee(Id) {
var gid = document.getElementById(Id);
var sam = gid.getAttribute('scrollamount');
gid.setAttribute('scrollamount', 0, 0);
window.setTimeout(function(){gid.setAttribute('scrollamount', sam, 0);},5000);
}
</script>
<!-- Fin des scripts -->
</body>
</html>
<!-- Fin de Corps Principal -->
