Resize problemen website in Chrome

[klepje]

Beste tweakers,

Ik ben bezig met een website te ontwikkelen, hierbij ondervind ik echter problemen met het resizen van de pagina in Google Chrome. Wanneer ik de website heb openstaan en Chrome aan de linkerkant van mijn scherm "dock", blijft alles nog goed. Maar wanneer ik daarna Chrome weer volledig open (over het hele scherm), vinden er rare taferelen plaats. Hieronder een voorbeeld:



Na een reload (of bijv. als je op "element inspecteren" klikt) is het weg.
Wat kan hiervan het probleem zijn? En waarom ik hier ben, wat zou een oplossing kunnen zijn?

Groeten,
Wesley

[noes]

Met de informatie uit je post kunnen we je helaas niet helpen, want we zijn niet helderziend of alwetend

- gebeurt dit in alle browsers (het ziet er een beetje uit als display corruptie, gebeurt het ook met een andere PC)?
- maak je gebruik van flash?
- hoe zit je CSS en HTML in elkaar voor dit betreffende deel?
- stuurt je JS nog iets aan bij resizen?
- wat zijn de afmetingen van het venster als je m klein hebt gemaakt en wat als je m vergroot?

Kan je een JSFiddle of korte showcase in elkaar zetten? Hier hoef je alleen het stukje code te plaatsen wat dit weergeeft en styled. De rest is niet nodig (en zelfs ongewenst).

[klepje]

- gebeurt dit in alle browsers?
* Ik heb het op dit scherm/computer geprobeerd op Internet Explorer, Chrome, Firefox, Opera & Safari, maar alleen Chrome lijkt problemen te hebben hiermee.

- maak je gebruik van flash?
* Er wordt geen gebruik gemaakt van flash in de site.

- hoe zit je CSS en HTML in elkaar voor dit betreffende deel?

HTML:

<div id="footer">
    <div id="slidernav">
        <ul>
            <li><a class="panel1" href="#"><span>1</span></a></li>
            <li><a class="panel2" href="#"><span>2</span></a></li>
            <li><a class="panel3" href="#"><span>3</span></a></li>
            <li><a class="panel4" href="#"><span>4</span></a></li>
        </ul>
    </div>
</div>

Cascading Stylesheet:

#footer{
 background-color: #FFFFFF;
 color: #000000;
 height:30px; 
 width: 100%;
 clear:both;
}

#slidernav ul li {
list-style-type: none;
width: 125px;
height: 30px;
display: inline-block;
line-height: 30px;
}

#slidernav ul li a {
background-image: url(../img/button.png);
display: block;
width: 125px;
height: 30px;
}

- stuurt je JS nog iets aan bij resizen?
* Ik heb alleen een JS bestand van Anythingslider [url: https://github.com/CSS-Tr.../jquery.anythingslider.js]

- wat zijn de afmetingen van het venster als je m klein hebt gemaakt en wat als je m vergroot?
Mijn resolutie is 1366 x 768, dus daar moet je dan één kant van nemen, dus dat is 683 x 768
Daarna het vergroten is dus het volledige scherm, 1366 x 768.

Ook het vergroten naar mijn externe scherm gaat verkeerd, dat heeft als resolutie 1680 x 1050.

[bartbh]

En als je eens een jsfiddle in elkaar kachelt?

[OkkE]

Het zou heel handig zijn om een (uitgeklede) online testcase te zien, maar ik gok er op dat het probleem zit in de AnythingSlider die de CSS niet (goed) update na een resize.

[klepje]

Het probleem zit inderdaad bij de AnythingSlider, weet iemand misschien hoe ik het kan updaten na een resize? Of is dit niet mogelijk. Verder is het alleen in Chrome, dus het lijkt me dat de overige browsers het automatisch doen, of dat dat wel is opgenomen in het AnythingSlider script?

[Bosmonster]

Chrome heeft wel vaker redraw issues is mijn ervaring. Je kunt een redraw forceren bij resize (zijn trucjes voor te vinden online).

[ Voor 4% gewijzigd door Bosmonster op 28-08-2012 17:00 ]

[Peter]

Dit is inderdaad een redraw probleem van Chrome (of, specifieker, WebKit). Welke versie van Chrome gebruik je? Een online test-case zou erg handig zijn voor het uitzoeken waar het probleem precies ligt, dan kunnen we dit oppakken voor een opkomende release .