[Løst] CSS bug i Blink

[jpg]

Er en CSS bug i Blink som irriterer meg grenseløst.

Problemet gjelder for et større publikum, så en løsning / fix haster.

http://vipnytt.no/siste/alle
( OBS! vises forskjellig på mobil og pc )
En side som lister opp alle nyheter fra de største nettavisene siste 24 timer.
Denne listen er i grunn svært lang, uleselig og problematisk lang. (klar over det)

Andre sider/kategorier, med færre nyheter fungerer knirkefritt. Kildekoden er identisk.

Problemet er at Chrome ikke klarer å håndtere den.
har fjernet alt av responsive ads, men fortsatt problemer.

Alle nyheter blir filtrert, og all form for kode blir fjernet på server siden.
På denne måten kan jeg si med sikkerhet at det IKKE er 1 enkelt nyhet som forårsaker problemet.

Relevant CSS for kolonnen til høyre:

#newslist_speed
{
	display: block;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 350px;
}
.headline
{
	word-wrap: break-word;
}
.description
{
	min-height: 0px;
	max-height: 36px;
	overflow: hidden;
	white-space: pre-line;
	word-wrap: break-word;
}

 

Innlegg opprinnelig postet på ITpro.no... dog uten svar...

Endret 11. januar 2015 av jpg

[jpg]

Vil raskt nevne at problemet ikke er til stede i dette øyeblikk, da det er for få nyheter som vises.

Problemet er med andre ord ikke løst enda, selv om det kanskje ser slik ut.

[etse]

Siden problemet bare kommer av og til er det vanskelig for oss å hjelpe, når det ikke alltid er reprodusertbart.

 

Når du oppdager feilen igjen: prøv å lagre HTMLen statisk, slik at du har en versjon av siden hvor feilen alltid oppstår - last den opp så den er tilgjengelig for oss andre. Da blir det enkelt for oss andre å se over hvorfor det oppstår.

[jpg]

Takk for tips.

 

Har nå lastet opp en statisk utgave, med 1.000 nyheter. Ganske tung side med andre ord.

Vanligvis skjer problemet ved 500-600 nyheter og oppover. Dette er da dog nyheter siste 24 timer xD

Andre kategorier passerer heldigvis sjelden 200 stk...

 

Statisk: http://vipnytt.no/debug/20150110.html

Live: http://vipnytt.no/siste/alle

[etse]

Den statiske fungerte helt fint i Chrome for meg.

[jpg]

Merkelig, har prøvd den statiske på 2 forskjellige PC-er, samme buggy resultat...

 

Men har du AdBlocker aktivert??

 

Kan det rett og slett hende at det er her problemet ligger her likevel?

Bruker responsive ads fra Google Adsense. Kan det hende at disse er ferdig lastet før selve side-innholdet er lastet?

Bruker asynkrone ads, dvs de skal laste etter resten av siden er lastet...

 

Anyway, mener jeg hadde fjernet ads fra nettsiden da jeg tok de første screenshottene, så forstår egentlig ikke hvordan problemet kan skje.

 

Kan det ha noe med PC ytelsen å gjøre? at Chrome bruker for lang tid eller noe? (dette blir egentlig spekulasjoner). Dog 2stk stasjonære, med rimelig bra ytelse begge 2 pc-ene.

 

EDIT: Får samme resultat som deg med AdBlocker aktivert. Dvs alt ser normalt ut.

Feilen er da relatert til ads.

 

Kolonnen til høyre, er også den som brukes på mobil, så ads må nesten være responsiv.

Spørsmålet er da hvordan jeg løser det?

Er det noe CSS kode jeg kan skrive? evt finnes det noen javascript løsning?

Endret 11. januar 2015 av jpg

[etse]

Ja, adblock var det som gjorde at jeg ikke klarte å reprodusere feilen.

 

Når jeg fjernet alle forekomster av <br><div align="left"><br> ble problemet fjernet.

 

Ser at google-adsene (som er gjemt inne i disse tagsene) er alt for store. Disse bruker inlinestyling, og ser ikke ut til å funke helt. Jeg er ikke noe ekspert på google-ads, men du må nok sørge for at google forstår hvilke størrelser de må holde seg innenfor.

 

Når jeg satte følgende CSS forsvart problemet: (tvinger containeren til reklamen til bredde som er innenfor scrollbaren).

div[align=left] ins {
    width: 340px;
}

Om du utvider dette med mediaqueries, eventuelt får den til å tilpasse seg foreldre-elementene så vil du nok løse problemet.

[jpg]

Takk for hjelp

 

Ser ut til at jeg må gjøre noe med adsene ja. Funker helt fint helt til siden blir "for lang". Ad koden er nemlig identisk på live utgaven hvor problemet altså ikke er tilstede i dette øyeblikk.