Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery slideToggle on iPhone leaving line artifacts
    primarykey
    data
    text
    <p>I'm having a bit of an issue with the slideToggle on the iPhone.</p> <p>After a ul is expanded there are some line artifacts left on the screen. (Right click on the image > view image to view it at full size)</p> <p><img src="https://i.stack.imgur.com/X1Cz1.png" alt="enter image description here"></p> <p>The weird part here is that when I zoom in very slightly the lines disappear. Than when I zoom out again the lines are still gone.</p> <p>The code:</p> <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; jQuery.noConflict(); jQuery(function () { jQuery("a").click(function () { var a = jQuery(this); a.siblings("ul").slideToggle("slow"); var url = jQuery.trim(jQuery(this).attr("href")); if (url != undefined &amp;&amp; url.length &gt; 0) return true; return false; }); }); &lt;/script&gt; &lt;style type="text/css"&gt; li { list-style: none; border: none; } ul { margin: 0; padding: 0; border: none; background-color: #fff; } #nav { padding-top: 7px; padding-bottom: 7px; border: none; background-color: #fff; } #nav ul { margin: 0; padding: 0; margin: 10px; background-color: #fff; } #nav ul ul { margin: 0; padding: 0; margin-top: 7px; margin-left: 15px; display: none; background-color: #fff; } #nav ul li { padding-bottom: 7px; background-color: #fff; } #nav ul li.last { padding-bottom: 0px; } #nav ul li &gt; a { display: block; padding: 15px; background: #05548D; color: White; text-decoration: none; border-radius: 5px; } #nav ul ul li &gt; a { background: #1872BE; } &lt;/style&gt; &lt;div id="nav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;News &amp;gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="Mobile-Home/News/Latest-News.aspx"&gt;Latest News&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="Mobile-Home/News/Upcoming-events.aspx"&gt;Upcoming events&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="Mobile-Home/News/Media-releases.aspx"&gt;Media releases&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="Mobile-Home/News/International-updates.aspx"&gt;International updates&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="Mobile-Home/News/eNewsletter.aspx"&gt;eNewsletter&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="Mobile-Home/News/Register-for-updates.aspx"&gt;Register for updates&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload