di Safari con il rendering in linea blocchi scalati dal scaleX

Questa è l'immagine di anteprima tazza:di Safari con il rendering in linea blocchi scalati dal scaleX

enter image description here

display di anteprima quali altri div contiene, ma ridimensionato dello 0,2. Per simulare la curva della superficie della tazza, ho usato una tecnica in cui i blocchi di anteprima hanno larghezza = larghezza orginale * 0,2, e sono ridimensionati dalla trasformazione scaleX, per 0,6, 0,8, 1, 0,8. 0.6.

Funziona bene (non posso usare tela HTML5 a causa della compatibilità crossbrowser, è un requisito), ma, come si può vedere in immagine allegata (immagine in alto è da cromo, fondo da Safari), safari rende luce indesiderata Linee. Niente aiuta - posizionamento assoluto, mettendo un blocco su altro per nascondere quella linea di luce. È un problema specifico per Safari, probabilmente perché dopo le sporgenze del blocco transformX sono antialiasing e a causa di scaleX, le sporgenze laterali diventano più luminose. Altri browser non lo fanno.

Qualcuno ha un'idea di come posso risolvere questo problema per eseguire il rendering senza quelle linee in Safari?

fonte

2012-11-13 Kamil Orzechowski

Un'illustrazione è buona, ma potresti creare un jsfiddle con il tuo markup CSS in modo che possiamo riprodurlo nei diversi browser? – Anson

Provare a utilizzare background-size anziché transform: scale.

fonte

2012-11-19 21:33:32 Henrik

Non penso che risolverà il mio problema - l'intera area con contenuti deve essere dimensionata in modo proporzionale, non solo in background. Forse non è chiaro a questa immagine, ma, quelle tele possono essere riempite con oggetti come testo o immagini, e se inizierò ad usare la dimensione di sfondo su ogni oggetto, e richiamando manualmente il testo con dimensione del carattere, ho fatto confusione ingestibile .. ecco perché deve essere fatto in scala sul contenitore genitore. –

Hai ragione, probabilmente sarebbe solo una soluzione se non hai bisogno di testo. Una possibile (ma complicata) soluzione alternativa potrebbe essere quella di eseguire il rendering del testo e dell'immagine su una tela, esportandola come dati: URI che si imposta come immagine di sfondo. – Henrik

così mamma è la soluzione. Usa ciò che ho ottenuto ora come retrocompatibilità con IE8 e implementa una nuova anteprima su canvas HTML5 per browser moderni incluso safari –

di Safari con il rendering in linea blocchi scalati dal scaleX

risposta

Problemi correlati