Elementi con posizione: relativo ai percorsi di clip SVG non visualizzati in Safari

Ho una pagina Web in cui sto utilizzando un percorso di clip SVG applicato a uno degli elementi HTML della pagina.Elementi con posizione: relativo ai percorsi di clip SVG non visualizzati in Safari

SVG elemento:

<svg height="0" width="0"> 
    <defs> 
     <clipPath id="clip"> 
      <path d="M150 0 L75 200 L225 200 Z" /> 
     </clipPath> 
    </defs> 
</svg>

elemento HTML il tracciato di ritaglio viene applicata a

<div id="clipMe"> </div>

CSS definendo la clip

#clipMe { 
    clip-path: url(#clip); 
    -webkit-clip-path: url(#clip); 
    width: 200px; 
    height: 200px; 
    background-color: red; 
}

Nella stessa pagina, ho vari elementi, alcuni dei quali sono posizionati relativamente:

<div style="position: relative"> 
    <strong>My parent is relative</strong> 
</div>

In Safari (8.0.4) solo, questi elementi posizionati relativamente non vengono visualizzati finché il collegamento da il div #clipMe nel clipPath (all'interno dell'elemento SVG) è intatto.

Le ultime versioni di FF e Chrome vengono visualizzate come previsto.

La modifica della proprietà position: su un valore diverso da quello relativo visualizza tutto come previsto.

La disattivazione del tracciato di ritaglio (rimuovendo l'elemento SVG tutti insieme o rimuovendo la proprietà clip-path: dal CSS) visualizza tutto come previsto.

JSfiddle:

nuovo, questo è solo Safari. Mi ci è voluto un po 'per isolarlo fino ad arrivare al tracciato di ritaglio SVG e allo position: relative quindi immagino che ci possano essere altre situazioni con risultati simili.

Qualcuno si è imbattuto in questo o ha qualche suggerimento per ottenere quelle posizioni relativamente s da visualizzare?

MODIFICA
È possibile che si tratti di una cosa del Mac. Anche se viene visualizzato come previsto in Chrome e Firefox in OSX, non visualizza i DIV relativamente posizionati in alcun browser su iOS.

Qualche idea?

fonte

2015-04-24 Daveh0

Non sono d'accordo con la modifica del titolo. Implica che l'elemento con il percorso della clip applicato non viene visualizzato. Questo non è il caso; l'elemento ritagliato sta mostrando bene. È l'altro elemento della pagina con 'position: relative' che non stava visualizzando. Il mio .02. – Daveh0

Prova utilizzando -webkit-transform:translateZ(1px) sull'elemento ritagliato. Se non viene visualizzato sui dispositivi mobili, potrebbe essere necessario includere anche gli altri prefissi. Demo

Forza l'accelerazione hardware (essenzialmente il browser presta più attenzione al rendering) inserendolo sulla GPU.

fonte

2015-04-25 01:22:06

Boom! Speravo in una soluzione di questa natura. Grazie! Ha definitivamente risolto il problema nel mio esempio. Riporterò se si è alzato o meno nella mia applicazione effettiva. Ci sono risorse intorno a questi buoni consigli aggregati come questo? – Daveh0

@ Daveh0 StackOverflow è uno: P –

touche =) Esiste un altro modo per forzare l'accelerazione hardware? Questa soluzione risolve il problema con l'elem che non viene visualizzato affatto e a sua volta ne causa uno nuovo: Nella mia implementazione "reale", avere uno pseudo-elemento (creato tramite :: before) che deve essere sovrapposto dal relativo elemento posizionato Per ottenere ciò, assegno 'z-index: -1' allo pseudo-elemento. Funziona alla grande fino a quando aggiungo '-webkit-transform: translateZ (1px)' a quel punto lo pseudo-elemento z-index sembra resettato causandone lo stack in cima all'elemento principale. http://jsfiddle.net/daveh0/64awcv0p/6/ – Daveh0

due cose:

utilizzando visualizzazione set css: block; a qualsiasi cosa che sia posizione: relativa;
provare chiaro: entrambi; a tutto ciò che è posizione: relativo;

Non ho la versione di safari che si sta utilizzando per testare in questo momento, ma so per esperienza precedente quando si lavora con posizione: relativo; potrebbe essere necessario cancellare o impostare la visualizzazione per bloccare.

EDIT: potrebbe aver trovato il problema.

Browser supportati per clip-percorso è parziale in Safari http://caniuse.com/#feat=css-clip-path

Si dovrebbe noi il prefisso -webkit-clip-path:

fonte

2015-04-24 06:53:00 Charlie

Ho appena provato entrambi inutilmente. – Daveh0

è solo lo svg che non viene visualizzato nella versione safari? In tal caso potrebbe trattarsi di un problema di compatibilità del browser. Alcuni browser non supportano svg. – Charlie

dopo aver visto questo http://caniuse.com/#feat=svg ho trovato che la versione 8 di Safari è compatibile – Charlie

Elementi con posizione: relativo ai percorsi di clip SVG non visualizzati in Safari

risposta

Problemi correlati