Checkboard artifact appears and scrolling breaks when changing select menu value #5443

ray023 opened this Issue Jan 15, 2013 · 2 comments


None yet

3 participants

ray023 commented Jan 15, 2013
  • Phone: Samsung Galaxy S
  • Firmware: 2.3.5
  • Build number: GINGERBREAD.UCKK4
  • Kernel:
  • Browser: Standard Android Browser

I have a simple html form that, once I change the value of a select menu from empty to a value in the list, I can no longer scroll vertically and the form becomes unusable.

In addition, a strange black & white checkerboard pattern appears at the top and bottom of my form.

Here is a video to demonstrate:

It shows the form scrolling up and down normally.

Then, I put a value in a the select menu. When I try to scroll after that, the checkerboard pattern appears.

NOTE: If I turn the display off, then turn it back on, the form returns to normal OR if I preload the form with a value, I do not have a problem.

Here is a test page:

or just use the markup below:

<html xmlns="">
  <title>Paleo Meal</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <link rel="stylesheet" href=
  "" type="text/css" />
  <script src="" type="text/javascript">
  <script src="" type= "text/javascript">

  <div id="fb-root"></div>

  <div data-role="page">
    <div data-role="header">
      <h1>Paleo Meal</h1>

    <div data-role="fieldcontain">
      <div id="_addMealFrame" data-role="collapsible" data-mini="true" data-theme="a"
        <h3 data-theme="d" id="_mealFrameText">Meal Details</h3>

        <form action="" method="post" accept-charset="utf-8" id="_profileForm" data-ajax=
        "false" enctype="multipart/form-data">
          <div data-role="fieldcontain">
            <label for="_mealDate">Date:</label><input type="text" name="meal_date"
            value="01/14/13" id="_mealDate" autocomplete="off" />

          <div data-role="fieldcontain">
            <label for="_mealTime" class="select">Meal Time:</label><select name=
            "meal_time" id="_mealTime">
              <option value="0">
                12 am

              <option value="1">
                1 am

              <option value="23">

          <div data-role="fieldcontain">
            <label for="_mealType" class="select">Meal Type:</label><select name=
            "meal_type_id" id="_mealType">

            <option value="">

              <option value="1">

              <option value="2">

              <option value="3">

              <option value="4">

              <option value="5">

          <div data-role="fieldcontain">
            <a href="" id="_cancel" data-ajax="false" data-role="button" data-inline=
            "true">Cancel</a><button name="" type="submit" id="_submit" class=
            "ui-btn-hidden" value="Save" aria-disabled="false" data-inline="true"
ldeluca commented Nov 5, 2014

@ray023 It's been almost 2 years since this issue was opened and we're doing some issue cleanup. Sorry that no one has gotten to you about this issue. Do you mind confirming whether or not it is still an issue with the latest jQM? Thanks

ray023 commented Nov 5, 2014

That's ok; thanks for getting back to me.
Just checked against JQM 1.4.5 and could not reproduce.
Feel free to close.

@arschmitz arschmitz closed this Nov 5, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment