[RISOLTO] Font cambiano di dimensione su chrome mobile

[danielecr]

Ciao a tutti,
ho un bizzarro problema che non so spiegarmi.
Ho come template beez3 e joomla 3.8.3: ho personalizzato l'index.php in modo da far apparire un bottone back to top, in questo modo.

Nell'head richiamo i font-awesome.

Subito sotto a <div id="all">:

Codice: [Seleziona]

<button class="btn" onclick="topFunction()" id="myBtn" style="border: none;">
     <i class="fa fa-chevron-up">
</button>

E prima della chiusura del /body lo script:

Codice: [Seleziona]

<script>
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

E relativo css:

Codice: [Seleziona]

#myBtn {
    position: fixed;
    bottom: 5px;
    right: 5px;
    background: orange;
    opacity: 0.6;
    width: 40px;
    height: 40px;
    display: block;
    text-decoration: none;
    z-index: 20000000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#myBtn i {
    color: #fff;
    margin: 0;
    position: relative;
    font-size: 19px;
    z-index: 20000000;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#myBtn:hover i {
    color: #fff;
    top: -5px;
    z-index: 20000000;
}
#myBtn:hover {
    background: #ee7600;
    z-index: 20000000;
}

Tutto funziona bene, ma con chrome per android (ultima versione del play store) ho un comportamento anomalo che non riesco a spiegarmi, in una pagina del sito.

In questa pagina ho molteplici paragrafi, come ad esempio:

Codice: [Seleziona]

<p style="text-align:justify">
contenuto1
</p>
<p style="text-align:justify">
contenuto2
</p>
<p style="text-align:justify">
contenuto3
</p>

Succede che al caricamento della pagina la dimensione dei font è uniforme, quando scrollo verso il basso e supero i 20px dal top appare il bottone, ma appena appare i font del primo <p></p> si rimpiccioliscono; se scrollo verso l'alto, quando il bottone scompare, i font tornano uniformi.

Il responsabile di questo cambiamento è questa parte di script:

Codice: [Seleziona]

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

Se la tolgo dall'index.php i font rimangono di dimensione uniforme.

Da desktop tutto in ordine, così come con il browser nativo di android (app "Browser").

Attaccato anche il cellulare al pc in debug remoto con chrome, l'unica cosa che cambia allo scroll è la classe del bottone, che passa da display:block a display:none e viceversa.

Non riesco a collegare lo script al cambiamento della dimensione dei font..qualcuno ha qualche idea?

[Alex21]

Non riesco a collegare lo script al cambiamento della dimensione dei font..qualcuno ha qualche idea?

Beh, una cosa che si nota è che il tag <i class="fa fa-chevron-up"> non è chiuso. Se anche nella pagina vera e non solo nel post c'è questo errore, allora può darsi che quel browser (  chrome per android (ultima versione del play store)) sia meno in grado di recuperare la cosa rispetto ad un browser da desktop.
Ciao! (hai chiesto un'idea, veh)

[danielecr]

Ciao! Grazie per la risposta, purtroppo è stato un errore di copia/incolla qui nel forum, ho aggiornato il post iniziale, il tag è chiuso.
Che gli dia fastidio il "block" del pulsante? Oppure penso a un problema (bug?) di chrome per mobile...

[giusebos]

puoddarsi che qualche regola ad OK con le mediaquesry risolvano la visualizzazione, scordati che il sito si debba vedere identico con tutti i browser...

[danielecr]

Grazie della risposta, assolutamente, utilizzo già le media queries per differenti visualizzazioni.
Qualsiasi regola css gli metta per il font-size, però, all'apparire del bottone, viene ignorata (al primo caricamento della pagina viene rispettata) e il testo del primo paragrafo si rimpicciolisce (di poco, ma mi da fastidio).
Nel css, html ha anche -webkit-text-size-adjust: 100%; e -ms-text-size-adjust: 100%; che dovrebbero preservare la dimensione del font per safari e ms..Chrome lo ignora, ho provato ad aggiungere anche un max-height molto grande per il container, come suggerito in rete, ma senza successo.

[giusebos]

Avranno fatto un sortilegio pure a te 

[Alex21]

Ho riprodotto il codice in una mini pagina stand alone. Bisogna caricarla da qualche parte e vedere se fa lo stesso risultato con android. Adesso non ho tempo.    Eccola: (bello il bottone)

Codice: [Seleziona]

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #myBtn {
                position: fixed;
                bottom: 5px;
                right: 5px;
                background: orange;
                opacity: 0.6;
                width: 140px;
                height: 40px;
                        /*display: block;*/
                text-decoration: none;
                z-index: 20000000;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                        display: none;
                -webkit-transition: all 0.3s linear;
                -moz-transition: all 0.3s ease;
                -ms-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }
            #myBtn i {
                color: #fff;
                margin: 0;
                position: relative;
                font-size: 19px;
                z-index: 20000000;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -ms-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }
            #myBtn:hover i {
                color: #fff;
                top: -5px;
                z-index: 20000000;
            }
            #myBtn:hover {
                background: #ee7600;
                z-index: 20000000;
            }
        </style>
    </head>
    <body>
        <div>TODO write content<>
        <div>
            <p style="text-align:justify;font-size: 20px;">
                contenuto1<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5
            </p>
            <p style="text-align:justify;font-size: 20px;">
                contenuto2<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5
            </p>
            <p style="text-align:justify;font-size: 20px;">
                contenuto3<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5<br>2<br>3<br>4<br>5
            </p>
        <>
        <div id="all">
            <button class="btn" onclick="topFunction()" id="myBtn" style="border: none;">
                <i class="fa fa-chevron-up">button !</i>
            </button>
            <br>
        <>   
        <script>
            window.onscroll = function() {scrollFunction();};


            function scrollFunction() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    myBtn.style.display = "block";
                } else {
                    myBtn.style.display = "none";
                }
                //alert(document.body.scrollTop);
            }


            function topFunction() {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            }
</script>
    </body>
</html> Ciao!

[danielecr]

Andrò fa uno scaccia sortilegi 
Appena ho un po di tempo proverò a replicare il problema su una semplice pagina html come ha suggerito alex almeno da capire se c'é conflitto con altro.

[danielecr]

Rieccomi, ho risolto.
Sebbene non sia riuscito a riprodurre il problema con una semplice pagina html, ho risolto con l'attributo max-height, che impedisce il font boosting, proprio di chrome per mobile (non avevo capito in effetti dove impostare questo max-height).
Nel mio caso, impostando al "body p" un max-height molto grande i font non cambiano più di dimensione da soli come se fossero posseduti

Codice: [Seleziona]

body p {
max-height: 999999px;
}