2

There seems to be a problem with the slideToggle() function on Android Chrome. During the animation, the font-size of the target div/p is changed to a smaller size (~80% of the initial size).

  • The font-size changing is not intended
  • The font-size change is not animated, but occurs instantly after I touch the button. The slideToggle animation works fine afterwards.
  • The dev-tool does not show any change in font-size

I tried to setup the javascript in various ways (also with onClick calling the function) but the problem doesn't seem to be with the code but with the browser? If so, is there a way to fix this? Or am I doing something wrong here?

  • I reproduced the problem on two different Android devices in chrome (don't know about other OS/browsers).
  • The problem does not occur on the mobile view on my Macbook's Chrome dev-tool, only on the actual mobile devices
<script>
    $( '.button' ).click( function() {
        $( '.target' ).slideToggle();
    });
</script>

<button type="button" name="button" class="button">BUTTON</button>
<div class="target">
    <p>HELLO</p>
</div>
Simon Fischer
  • 31
  • 3

2 Answers2

1

The same problem was solved for me by setting the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(Just doing a repost of the solution in the comments of the other answer for easier reference).

Philipp Moers
  • 570
  • 3
  • 15
0

Okay that's very weird, I've just tested the code with a slight adjustment on my Android phone hosted off a web server. Are you using the code as it stands? Purely because the script should normally go after the HTML as the button hasn't been created yet to add the event listener. If you can add a link to a video of it happening that might help.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" name="button" class="button">BUTTON</button>
<div class="target">
    <p>HELLO</p>
</div>

<script>
    $( '.button' ).click( function() {
        $( '.target' ).slideToggle();
    });
</script>
Frazzle
  • 23
  • 1
  • 9
  • 1
    Thanks for the response! Apparently he problem seems to be with chrome resizing text for readability. A fix for this is to add a max-height: 99999px to the element. Elements with dynamic heights have their text resized. This didn't seem to be a problem in general, but the font-size resets to my defined 16px during the slideToggle() transformation. I fixed it now with the addition of the max-height property in my css. Reference: https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font – Simon Fischer Feb 12 '19 at 15:49
  • Good to know you've got it working - reading that post says setting the viewport also helps fix that which might be a more elegant solution. – Frazzle Feb 12 '19 at 15:58