TurboLab.it

Inviato: **lun feb 16, 2015 11:39 am**

Nella home (e nelle altre pagine), con IE 11 desktop (da mobile la UI è diversa, quindi il problema non sussiste), non vengono caricate le icone di Windows e Android presenti nell'header.

Screenshot: https://onedrive.live.com/redir?resid=5 ... hoto%2cpng

Gli url delle immagini incriminate sono:
- //cdn.phporn.net/images/windows.svg
- //cdn.phporn.net/images/android.svg

Quella di Linux ( //cdn.phporn.net/images/linux.svg ), invece, viene mostrata correttamente.

Inviato: **lun feb 16, 2015 3:05 pm**

developerwinme ha scritto:Gli url delle immagini incriminate sono:
- //cdn.phporn.net/images/windows.svg
- //cdn.phporn.net/images/android.svg

Quella di Linux ( //cdn.phporn.net/images/linux.svg ), invece, viene mostrata correttamente.

Ciao developerwinme,
il "problema" di quelle due immagini è che non sono propriamente degli SVG (vettoriali), ma il codice SVG contiene al suo interno un riferimento a un'immagine PNG (raster) che, come se non bastasse, viene incorporata usando la codifica Base64:

Codice: Seleziona tutto

<svg
[...]
   width="1492"
   height="1480"
   sodipodi:docname="Windows_logo.png">
  <metadata  id="metadata2991">
[...]
  </metadata>
  <defs
     id="defs2989" />
[...]
  <image
     width="1492"
     height="1480"
     xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA
[...]
     6gAAAAAA0OD/AaAAVAZu5skqAAAAAElFTkSuQmCC"
     id="image2993"
     x="0"
     y="0" />
</svg>

... tecnica perfettamente lecita, ma forse è un po' troppo pretendere che il buon vecchio Internet Explorer possa riuscire a capirci qualcosa...

Ciao, Pippo.

Inviato: **lun feb 16, 2015 3:26 pm**

Ciao, grazie per la risposta molto completa e dettagliata.

Non sono propriamente un esperto dell'argomento specifico ma mi sfugge l'utilità di inserire, "all'interno" di un immagine vettoriale (con tutti i vantaggi del caso) svg, una immagine in formato raster (con tutti gli svantaggi del caso) png: Ci sono vantaggi rispetto all'inserimento dell'immagine png "semplice" o di una svg "semplice", visto anche che si perde in interoperabilità con uno dei motori di rendering principali, anche nella sua ultima versione?

@Zane: É scelta voluta?

PS curiosamente, aprendo direttamente gli url in questione, l'immagine viene correttamente mostrata: Possibile che entri in gioco la CSP adottata su turbolab.it?

Inviato: **lun feb 16, 2015 4:25 pm**

developerwinme ha scritto:PS curiosamente, aprendo direttamente gli url in questione, l'immagine viene correttamente mostrata: Possibile che entri in gioco la CSP adottata su turbolab.it?

In realtà TurboLab.it non adotta alcuna Content Security Policy: come già verificatosi in passato potrebbe trattarsi della direttiva X-Content-Type-Options: nosniff

Personalmente non posso verificarlo perché, al momento, non dispongo di un computer con Windows installato. Chi intendesse occuparsene può trovare alcune informazioni QUI.

Inviato: **mar feb 17, 2015 6:40 pm**

hashcat ha scritto:potrebbe trattarsi della direttiva X-Content-Type-Options: nosniff

Può essere... il server dichiara un "Content-Type: image/svg+xml", ma poi il povero IE si ritrova con un PNG (che non può neanche "sniffare" per capire di cosa si tratta).
Però immagino ci sia anche qualche problema legato al cross-site, altrimenti non si spiegherebbe come mai:

developerwinme ha scritto:curiosamente, aprendo direttamente gli url in questione, l'immagine viene correttamente mostrata

Inoltre la direttiva "X-Content-Type-Options: nosniff" dovrebbe avere effetto anche su Chrome, ma non è così.

Comunque, come dice developerwinme, penso che la soluzione più semplice sia di sostituire quei due loghi con due PNG (o SVG) ..."normali".

Inviato: **mar feb 17, 2015 7:21 pm**

Grazie a tutti per le risposte.

Ho aperto bug, così che Zane ci guardi quando ha tempo (si tratta comunque di una problematica a bassa priorità): https://bug.turbolab.it/turbolabit/issues/164

Inviato: **mar feb 17, 2015 7:32 pm**

Ho appena fatto una prova andando a modificare, con gli strumenti di sviluppo, il codice html restituito da TLI, considerato che mi sembrava parecchio strano il fatto che l'immagine venisse caricata dall'url diretto e non all'interno del portale.

Sono giunto alla conclusione che l'immagine viene caricata correttamente, ma ne vengono visualizzati solo i 22*22 pixel in alto a sinistra, che coincidono con dei pixel trasparenti. Andando ad eliminare i tag relativi a altezza e larghezza, l'immagine viene mostrata correttamente, rovinando però il layout della pagina.

Rimane da capire il perché di tale comportamento, ma credo che possiamo escludere nosniff e CSP, senza dubbio.

EDIT: Una immagine del tutto equivalente per Windows è ospitata qui ( https://turbolab.it/images/icon/windows.png ), mentre per Android si può usare questa ( https://turbolab.it/images/icon/android.png )

Inviato: **mar feb 17, 2015 11:25 pm**

developerwinme ha scritto:Sono giunto alla conclusione che l'immagine viene caricata correttamente, ma ne vengono visualizzati solo i 22*22 pixel in alto a sinistra, che coincidono con dei pixel trasparenti. Andando ad eliminare i tag relativi a altezza e larghezza, l'immagine viene mostrata correttamente, rovinando però il layout della pagina.

Rimane da capire il perché di tale comportamento, ma credo che possiamo escludere nosniff e CSP, senza dubbio.

Ottimo lavoro!

Inviato: **mer feb 18, 2015 9:51 am**

PippoDJ ha scritto:Ottimo lavoro!

Grazie!

Sarei davvero curioso di capire per quale motivo IE interpreti come prioritaria l'indicazione di dimensione presente all'interno della SVG per l'immagine PNG (che indica una dimensione di circa 1400x1400), piuttosto che quella imposta nella pagina dove è inserita l'immagine (22x22). Sarà un bug o un comportamento voluto, magari conforme a qualche interpretazione discutibile dello standard?

In ogni caso, eliminando le SVG "strane" dovremmo anche guadagnare qualche KB di spazio (sai che guadagno

), perché usare un immagine raster 1400x1400 per un logo grande 22x22 spreca inevitabilmente un po' di banda.

Inviato: **sab feb 21, 2015 11:24 pm**

Grazie a tutti per aver esposto problema, causa e soluzione! Le immagini SVG risalgono ad un tempo in cui stavo facendo prove assortite. Mi era completamente sfuggito il fatto che uno dei convertitori PNG->SVG che avevo usato avesse semplicemente embeddato

Non so dire perché IE non le gestisca a dovere... ma un embedding di questo tipo è una schifezza a prescindere, quindi...

Ho risolto il problema sostituendo le SVG malfunzionanti con tradizionali PNG. Rimangono immagini grandi ridimensionate via HTML ma, in questo momento, mi sta bene che sia così

Inviato: **sab feb 21, 2015 11:36 pm**

Zane ha scritto:Non so dire perché IE non le gestisca a dovere...

Anche Safari 7.1 non le renderizzava.

TurboLab.it

[Portale] Non si vedono alcune immagini nell'header della home (IE 11)

[Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)

Re: [Portale] Non si vedono alcune immagini nell'header della home (IE 11)