Google Chrome - strange display of html
I use lot of jquery in CMS that I made myself and now I've noticed some strange behavior of Google Chrome when it tries to display content of CMS. When clicking on link via navigation menu search form is displayed like this: sometimes even like this:
But when I refresh page using refresh button or F5 then it's displayed correctly. In Firefox, Opera and IE this problem doesn't occur. Locally tested, Chrome also makes errors but bit different then showed on these images. When I disable all jquery and javascript this problem disappears. Has anyone noticed anything similar in Chrome?
This is html code of that container:
<div class="forma_odabir_vijesti">
<form class="po_broju" method="GET" action="">
<input type="hidden" name="link" value="news" />
<label class="prikazi">Prikaži</label>
<input class="broj_vijesti" name="broj_vijesti" type="text" />
<select name="sort" class="sortiranje">
<option value="DESC">zadnjih vijesti</option>
<option value="ASC">prvih vijesti</option>
</select>
<input class="submit" type="submit" name="broj_v" value="Ok" />
</form>
<form class="po_idu" method="GET" action="">
<input type="hidden" name="link" value="news" />
<label class="prikazi">Prikaži vijest id#</label>
<input class="id_vijesti" name="id_vijesti" type="text" />
<input class="submit" type="submit" name="id_v" value="Ok" />
</form>
<form class="po_datumu" method="GET" action="">
<input type="hidden" name="link" value="news" />
<label class="prikazi">Prikaži vijesti iz dana</label>
<input class="datum_prikaza" name="datum_prikaza" type="text" id="mydate" />
<input class="submit" type="submit" name="datum_v" value="Ok" />
</form><div class="dno"></div>
<form class="po_rasponu_datuma" method="GET" action=""> 开发者_运维知识库
<input type="hidden" name="link" value="news" />
<label class="prikazi">Prikaži vijesti od</label>
<input class="datum_prikaza" name="datum_prikaza2" type="text" id="mydate2" />
<label class="prikazi">do</label>
<input class="datum_prikaza" name="datum_prikaza3" type="text" id="mydate3" />
<input class="submit" type="submit" name="raspon_datuma_v" value="Ok" />
</form>
<form class="trazilica" method="GET" action="">
<input type="hidden" name="link" value="news" />
<label class="prikazi">Traži vijesti</label>
<input class="trazi_vijest" name="trazilica" type="text" />
<input class="submit" type="submit" name="trazi_v" value="Traži" />
</form>
<div class="dno"></div>
</div>
I got the same problem except me it only goes wrong when I hit refresh, when I browse the site everything is fine... just when I hit refresh my layout is going crazy... and like you it's only on Chrome !
For your information my bug is happening with the "height" property of jQuery. Maybe that'll help a bit to find the problem.
This may be a long shot, but I was seeing similar issues in Chrome because I was using the TinyMCE editor. Something in the standard init() doesn't play well with webkit. (even though I wasn't using the editor in that page, the init was in my header scripts, maybe you have the same?)
Work-around here: http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=65112 (Unwanted raw html in Safari)
Just throwing in my 2¢ as this took me way too long to figure out & I stumbled across your question during my search.
I see some html showing in your screen shot in the upper right-hand corner. Did you leave a tag open?
Looking at your screenshots - there is some text appearing after the OK button that doesn't seem right:
v class="dno">
I'd have a look in the HTML around that point - have you got some badly nested quote tags? That'd certainly cause the problems you're having, even more exactly if this HTML is being generated or manipulated by the JQuery. You may be able to use "Developer" tools built into the browser to watch what the JavaScript is doing as it happens.
精彩评论