CSS-Rahmen Bildverlauf funktioniert nicht in Safari 10

Ich stieß auf ein Problem mit Safari 10 und CSS Rahmen Bildverläufe. Es funktioniert in allen anderen Browsern und sogar in Safari 9. Es erscheint sogar in Safari 10 in Online-Simulatoren. Bitte beachten Sie Bilder unter:CSS-Rahmen Bildverlauf funktioniert nicht in Safari 10

(Ich denke, dass der IE ist 11, nicht IE 10. Danke für die Korrektur!)

Ich nahm an, es war nur meine CSS so wirklich ich simplfied und machte eine Geige. Sie können es unter https://jsfiddle.net/tgbuxkee/

sehen. Es wird auch unten generiert.

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 6px solid transparent; 
 
    -moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%); 
 
    -webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%); 
 
    border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%); 
 
    -webkit-border-image-slice: 2; 
 
    border-image-slice: 2; 
 
    
 
}

<div> 
 

 
</div>

Hat keine Ahnung, jemand, warum dies geschehen könnte? Ich weiß, dass es in Safari eine bug mit einigen Bildrahmen gibt, aber ich denke nicht, dass das der Fall ist (vielleicht ist es das).

Und Anleitung ist hilfreich.

Vielen Dank.

Quelle

2016-12-01 Kenton de Jong

Ich habe das in der Vergangenheit gesehen, aber ich bin nicht 100% sicher, es funktioniert immer noch (und so noch eine Antwort zu posten). Anstelle von 'border: 6px solid transparent'; Versuchen Sie einfach, 'border-width: 6px; border-style: solid; '(keine' border-color') und das hat früher funktioniert. Es funktioniert auch für andere Browser, weil das Bild die Farbe überschreiben würde. – Harry

Ich habe in der Vergangenheit in dieses Problem geraten und erinnere mich irgendwo im Web lesen, dass die Vermeidung der border-color: transparent Einstellung das Problem lösen würde. Ich kann mich nicht erinnern, wo ich darüber gelesen habe.

Es scheint, als würde Safari 10 auf dem Mac der transparenten Rahmenfarbe über dem Rahmenbild den Vorzug geben und so nichts anzeigen. Nur das Setzen der border-width und border-style allein würde es lösen. Diese Lösung funktioniert auch auf anderen unterstützten Browsern.

Getestet auf Chrome v56 (dev), 10 Safari (Mac), Safari 5 (Windows), Safari (iOS), IE11, Rand, Firefox 47.0.1, Opera 41.

Hinweis: Sie habe IE10 in der Frage zitiert aber soweit ich weiß border-image doesn't work in it und so die gegebene Lösung auch nicht.

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-width: 6px; 
 
    border-style: solid; 
 
    -moz-border-image: -moz-linear-gradient(top, #f0e2d0 0%, #c08b62 100%); 
 
    -webkit-border-image: -webkit-linear-gradient(top, #f0e2d0 0%, #c08b62 100%); 
 
    border-image: linear-gradient(to bottom, #f0e2d0 0%, #c08b62 100%); 
 
    -webkit-border-image-slice: 2; 
 
    border-image-slice: 2; 
 
}

<div> 
 

 
</div>

Quelle

2016-12-01 08:21:24 Harry

Das ist die Lösung! Was für ein seltsames "Feature". Danke vielmals! Und danke für die Bearbeitung für IE 10. Ich glaube, ich war mit IE 11. –

Gern geschehen @KentondeJong. Freue mich zu helfen :) – Harry

der folgende hilfreiche Zusatzinformation sein kann. Die angenommene Antwort ist immer noch gültig für Safari 11 (ab dem Posten), aber für den Rekord, habe ich auch gefunden, dass mit, border-image: url, Safari (v11) akzeptiert die shorthand Grenze, mit transparent, wenn Sie listen die -webkit- Anbieter Präfix letzte, wie folgt aus:

div { 
    border:1px solid transparent; 
    border-image:url([some-border-image]) 1 0 1 repeat; 
    -webkit-border-image:url([some-border-image]) 1 0 1 repeat; 
}

da es nicht-Standard ist zuletzt mit dem Verkäufer Präfix aufzulisten, ziehe ich die akzeptierte Antwort, da die meisten Web-Standards freundlich .

Quelle

2018-02-23 20:34:04 user16119

CSS-Rahmen Bildverlauf funktioniert nicht in Safari 10

Antwort

Verwandte Themen