Problème d’affichage thermoAlternateView mode Dark avec IOS 26.X

Plugins Confort
1

Bonjour,
depuis le passage à IOS26, je rencontrais des problèmes d’affichage de mes tuiles Thermostat en utilisant le mode Dark de ThermoAlternateView.
En m’inspirant d’un sujet cloturé avec une modif pour l’appli Jeedomconnect (qui ne maerchait pas chez moi en utilisant directement une page safari), j’ai repris le code du fichier . html et surtout le code du .css (merci Claude…)

j’arrive à ce résultat assez proche de l’origine
image

Si cela peut intéresser qqn je laisse les codes en copie ici.

thermoAlternateView_display_dark.html

<script type="text/javascript" src="plugins/thermoAlternateView/3rparty/svg4everybody.js"></script>
<script type="text/javascript" src="plugins/thermoAlternateView/core/template/thermoAlternateView_Display.js"></script>

<div class="eqLogic-widget eqLogic allowResize" style="width: #width#;height: #height#;border:#border#;border-radius:#border-radius#;background-color: #background-color#;color: #color#;#style# "
    data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#">


    <div class="thermoDark-cover #thermo-cover#">
        <div style="#hideEqLogicName#" class="widget-name #thermo-widget-name#">
            <a href="index.php?v=d&amp;p=thermoAlternateView&amp;m=thermoAlternateView&amp;id=#id#" style="font-size : 1.2em;">#name#</a>
            <span class="object_name">#object_name#</span>
        </div>
        <div class="thermoDark-top-side-right">
            <div class="thermoDark-row-2 thermoDark-contents">
              <div id="thermoDark-temp-ext" style="z-index:100;" class="#temperature-histo#" data-cmd_id="#tempInterieure-id#">
                         <span class="thermoDark-degre">#thermo-unit#</span>
                    <span class="thermoDark-temperature">#temperature-value#</span>
                </div>
                <div style="z-index:100;display:#tempExterieure-visible#" class="thermoDark-temp-externe">
                    <svg class="thermoDark-img" >
                        <use style="visibility: hidden;" xlink:href="plugins/thermoAlternateView/desktop/images/images.svg#shape-icon-externe" />
                    </svg>
                    <span style="z-index:100; float: right;width: 35px;">
                        <span class="thermoDark-temperature-ext #tempExterieure-histo#" data-cmd_id="#tempExterieure-id#">#tempExterieure-value#</span><span class="thermoDark-degre">#thermo-unit#</span>
                    </span>
                </div>
                <div style="z-index:100;display:#hygrometrie-visible#" class="thermoDark-temp-externe">
                    <svg class="thermoDark-img">
                        <use style="visibility: hidden;" xlink:href="plugins/thermoAlternateView/desktop/images/images.svg#shape-icon-water" />
                    </svg>
                    <!-- <object type="image/svg+xml" data="plugins/thermoAlternateView/resources/water.svg" class="thermoDark-img">
                    </object> -->

                    <span style="z-index:100; float: right;width: 35px;">
                        <span class="thermoDark-hygrometrie #hygrometrie-histo#" data-cmd_id="#hygrometrie-id#">#hygrometrie-value#</span><span class="thermoDark-degre">%</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="thermoDark-mode">
            #thermo-mode-mobile#
        </div>
        <div class="thermoDark-back">
            <div>
                <svg class="thermoDark-button thermoDark-button-plus" data-cmd_id="#thermostat-id#" data-cmd_val="#consigne-value#">
                    <use style="visibility: visible;" xlink:href="plugins/thermoAlternateView/desktop/images/images.svg#shape-icon-up" />
                </svg>
            </div>
            <div class="thermoDark-consigne #consigne-histo#" data-cmd_id="#consigne-id#">
                <span>#consigne-value#</span>
                <span class="thermoDark-degre">#thermo-unit#</span>
            </div>
            <div>
                <svg class="thermoDark-button thermoDark-button-moins" data-cmd_id="#thermostat-id#" data-cmd_val="#consigne-value#">
                    <use style="visibility: visible;" xlink:href="plugins/thermoAlternateView/desktop/images/images.svg#shape-icon-down" />
                </svg>
            </div>
        </div>
        <div class="thermoDark-right-side">
            <svg style="#thermo-islockColor#;display:#lock-visible#" class="thermoDark-button thermoDark-lock-icon" data-cmd_id="#lock-id#" data-cmd_id2="#lock-id2#">
                <use style="visibility: hidden;" xlink:href="plugins/thermoAlternateView/desktop/images/images.svg#lock-icon#" />
            </svg>
            <svg style="#statut-color#" class="thermoDark-mode-icon" data-cmd_id="#statut-id#">
                <use style="visibility: hidden;" xlink:href="plugins/thermoAlternateView/desktop/images/images.svg#statut-icon#" />
            </svg>
        </div>
        <div class="thermoDark-bottom-side-right">
            <div class="thermoDark-row-2 thermoDark-contents">
                <div style="z-index:100;display:#puissance-visible#" class="thermoDark-temp-externe">
                    <svg class="thermoDark-img">
                        <use style="visibility: hidden;" xlink:href="plugins/thermoAlternateView/desktop/images/images.svg#shape-icon-power" />
                    </svg>
                    <span style="z-index:100; float: right;width: 35px;">
                        <span class="thermoDark-degre">%</span>
                        <span style="z-index:100; float: right;" class="thermoDark-puissance #puissance-histo#" data-cmd_id="#puissance-id#">#puissance-value#</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="thermoDark-statistics" style="display:#statistics-visible#">
            <svg class="thermoDark-button-statistics">
                <use style="visibility: hidden;" xlink:href="plugins/thermoAlternateView/desktop/images/images.svg#shape-statistics" />
            </svg>
        </div>
        <div style="display:#nextConsigne-visible#" class="thermoDark-next-consigne">
            #thermo-nextOccurence#
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).change(function (e) {

        if (e.target.dataset.eqlogic_uid === "#uid#") {
            initDisplay#uid#();
        }
    });

    $(document).ready(function () {
        initDisplay#uid#();
    });

    function initDisplay#uid#() {
        var param = {};

        param.uid = "#uid#";
        param.tempInterieureId = "#tempInterieure-id#";
        param.tempExterieureId = "#tempExterieure-id#";
        param.hygrometrieId = "#hygrometrie-id#";
        param.puissanceId = "#puissance-id#";
        param.consigneId = "#thermostat-id#";
        param.statutId = "#statut-id#";
        param.lockId = "#lock-id#";
        param.modeId = "#mode-id#";
        param.lockColor = "#thermo-lockColor#";
        param.flameColor = "#thermo-flameColor#";
        param.waitColor = "#thermo-waitColor#";
        param.fanColor = "#thermo-fanColor#";
        param.eqLogicId = "#thermo-eqLogicId#";
        param.statisticsUrl = "#statistics-url#";

        initialize(param, "dark");
    }
</script>

le fichier thermoAlternateView_dark.css

@font-face {
    font-family: Work Sans;
    src: url(../../3rparty/fonts/Work_Sans/WorkSans-ExtraLight.ttf);
}


[class*=thermoDark-] {
    color: #FEFEFE;
}

.thermoDark-consigne,
.thermoDark-consigne-mobile {
    font-family: 'Work Sans', sans-serif;
    font-size: 5em;
    line-height: 0.9;
    height: 40%;
}

.thermoDark-consigne-mobile {
    font-size: 4em;
    line-height: 0.7;
}

.thermoDark-top-side-right,
.thermoDark-bottom-side-right,
.thermoDark-top-side-right-mobile {
    font-family: 'Work Sans', sans-serif;
    font-size: 2.5em;
    height: 25%;
    width: 33.33%;
    fill: #FEFEFE;
    position: relative;
    top: -8px;
    float: right;
    margin-right: 16px;
    text-align: right;
}

.thermoDark-top-side-right span,
.thermoDark-bottom-side-right span {
    color: #B5B5B5;
}

#thermoDark-temp-ext {
    margin-bottom: 10px;
  	font-size: 1.1em; /* ← +10% par rapport à l'origine */
}

.thermoDark-top-side-right-mobile>div:first-child {
    font-size: 0.4em;
    margin-right: 10px;
}

.thermoDark-top-side-right-mobile {
    width: 100%;
    float: none;
    margin-top: 10px;
}

.thermoDark-bottom-side-right {
    position: absolute;
    top: calc(100% - 53px);
    left: 66.7%;
    height: 30px;
    transform: translateX(-16px) translateY(-50%);
}

.thermoDark-degre,
.thermoDark-degre-mobile {
    font-family: 'Work Sans', sans-serif;
    font-size: 0.7em;
    vertical-align: top;
    float: right;
}

.thermoDark-degre-mobile {
    margin: 0 auto 0 0;
}

.thermoDark-widget-name {
    background-color: #191919;
    padding-left: 16px;
}

.thermoDark-widget-name > a {
    color: #959595 !important;
}

.thermoDark-temperature {
    float: right;
}

.thermoDark-temperature-mobile {
    margin: 0 0 0 auto;
}

/*
 * iOS 26 / Safari 26 : float:left mettait les icônes côte à côte.
 * Remplacé par block + text-align:right pour les empiler verticalement.
 */
.thermoDark-temp-externe {
    font-size: 0.4em;
    display: block;
    float: none;
    text-align: right;
}

.thermoDark-img,
.thermoDark-img-mobile {
    height: 16px;
    width: 16px;             /* valeur fixe au lieu de 30% */
    fill: #61B872;
    vertical-align: middle;
}

.thermoDark-img-mobile {
    width: 20%;
}

/*
 * iOS 26 / Safari 26 : width:100% dans un contexte flex colonne
 * provoquait un débordement. Remplacé par une valeur fixe.
 */
.thermoDark-button,
.thermoDark-button-mobile {
    height: 40px;
    width: 60px;
    cursor: pointer;
    fill: #959595;
    margin: 8px 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.thermoDark-button-mobile {
    margin: 0;
}

.thermoDark-button:hover {
    color: #61B872;
    fill: #61B872;
}

.thermoDark-button-statistics {
    height: 2.2em;
    width: 2.2em;
    cursor: pointer;
    fill: #959595;
    position: absolute;
    top: calc(100% - 2.2em - 16px);
    left: calc(100% - 2.2em - 16px);
}

.thermoDark-next-consigne {
    font-family: 'Work Sans', sans-serif;
    position: absolute;
    top: calc(100% - 1em - 16px);
    left: 16px;
    color: #B5B5B5 !important;
}

.thermoDark-button-statistics:hover {
    fill: #61B872;
}

.thermoDark-cover {
    width: 100%;
    height: 100%;
    position: relative;
    /* iOS 26 : forcer un contexte de rendu isolé pour éviter les décalages viewport */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.thermoDark-cover-color {
    -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.75);
    background: #1D1D1D;
}

/*
 * iOS 26 / Safari 26 : height en % échouait sans contexte de hauteur explicite.
 * Ajout de min-height et passage en flex colonne pour garantir
 * l'affichage des flèches et de la consigne.
 */
.thermoDark-back,
.thermoDark-back-mobile {
    height: 66.67%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: border-box;
    min-height: 120px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.thermoDark-back-mobile {
    height: 50%;
    left: 45%;
}

.thermoDark-back>div,
.thermoDark-back-mobile>div {
    display: -webkit-inline-flex;
    display: inline-flex;
}

.thermoDark-mode-icon,
.thermoDark-wait-icon,
.thermoDark-lock-icon {
    margin: 0 0 0 5px;
    width: 25px;
    height: 30px;
    fill: #959595;
    float: right;
}

.thermoDark-mode-icon {
    fill: #61B872;
}

/*
 * iOS 26 / Safari 26 : passage en flex colonne pour empiler les boutons
 * proprement et limiter leur hauteur totale.
 */
.thermoDark-mode {
    width: 33%;
    max-width: 180px;
    position: absolute;
    top: calc(50% + 24px - 16px);
    transform: translateY(-50%);
    line-height: 1.5em;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    max-height: 72%;
}

.thermoDark-mode-mobile {
    z-index: 99;
    width: 100%;
    display: -webkit-inline-flex;
    display: inline-flex;
    /* iOS 26 : position sticky + top:100% est cassé, remplacé par relative */
    position: relative;
    margin-bottom: 5px;
}

.thermoDark-mode-mobile > span {
    width: auto;
    height: auto;
    margin: auto;
}

.thermoDark-mode-mobile svg {
    width: 40px;
}

/*
 * iOS 26 / Safari 26 : repositionné avec right fixe au lieu de left:%
 * pour éviter le chevauchement avec les boutons de mode.
 * Passage en flex row pour afficher flamme + cadenas côte à côte.
 */
.thermoDark-right-side {
    position: absolute;
    top: calc(50% + 24px);
    right: 16px;
    left: auto;
    height: 70px;
    width: 60px;
    transform: translateY(-50%);
    z-index: 10;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row-reverse;
    -webkit-align-items: center;
    align-items: center;
    gap: 2px;
}

.thermoDark-statistics {
    width: 33.33%;
    float: right;
}

.thermoDark-switch-off,
.thermoDark-switch-off span {
    cursor: pointer !important;
}

/*
 * iOS 26 / Safari 26 : inline-block ne maintient pas svg + span sur la même ligne.
 * Remplacement par inline-flex avec alignement centré.
 * width:100% + align-items:stretch sur le parent pour uniformiser la largeur.
 */
.thermoDark-switch-off,
.thermoDark-switch-on {
    background-color: #595959;
    border-radius: 8px;
    margin: 2px 4px;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
}

.thermoDark-switch-on {
    background-color: #3B3B3B;
    color: #BFBFBF;
}

.thermoDark-switch-off>p:first-letter,
.thermoDark-switch-on>p:first-letter {
    text-transform: capitalize;
}

.thermoDark-mode-label {
    width: 24px;
    height: 20px;
    vertical-align: middle;
    margin: 2px;
    fill: #FEFEFE;
    /* iOS 26 : empêcher le SVG de rétrécir dans le conteneur flex */
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.thermoDark-mode-label-on {
    fill: #61B872;
}

/*
 * iOS 26 / Safari 26 : le <span> de texte injecté dynamiquement
 * peut passer à la ligne si white-space n'est pas forcé.
 */
.thermoDark-switch-off > span:not([class]),
.thermoDark-switch-on > span:not([class]) {
    white-space: nowrap;
}

.thermoDark-row-2>div:first-child {
    height: 75%;
}

.thermoDark-row-2>div:last-child {
    height: 25%;
}

.thermoDark-col-2>div {
    width: 50%;
}

.thermoDark-flex {
    display: -webkit-inline-flex;
    display: inline-flex;
}

/*
 * iOS 26 / Safari 26 : display:contents a des régressions connues
 * avec les éléments float et les hauteurs en pourcentage imbriquées.
 * Remplacement par block.
 */
.thermoDark-contents {
    display: block;
    width: 100%;
    height: 100%;
}


/*.thermoDark-mode {
    border: 2px solid red;
}

.thermoDark-right-side {
    border: 2px solid blue;
}

.thermoDark-cover {
    border: 2px solid green;
}

.thermoDark-back {
    border: 2px solid orange;
}

.thermoDark-bottom-side-right {
    border: 2px solid yellow;
}
*/
/* bordures des cadres pour mieux comprendre le placement. décommenter pour les faires apparaitre */

Voilà, si jamais cela peut servir à qqn
bonne journée

Nicolas

3 « J'aime »