Webkit-Stopps für lineare Verläufe werden falsch gerendert
In Webkit-Browsern (Chrome, Opera) ist ein seltsames Problem aufgetreten.
Testfall:http://sample.easwee.net/gradient-bug/ (Check in Chrome oder neuester Opera)
Ich habe zwei Spalten von einem Container gewickelt. Ich wende einen CSS-Farbverlauf an, um Hintergründe für diese beiden Spalten zu erstellen. Der Farbstopp ist auf eingestellt66%
und Spalten haben das gleiche66%
width (unter Verwendung des Auffüllens, um die rechte Spalte zu versetzen).
In Firefox wird die Darstellung korrekt wiedergegeben - sowohl das Spaltenlayout als auch der Gradientenstoppunkt stimmen überein, aber in Webkit-basierten Browsern stimmt der Farbstopp nicht mit der Spaltenbreite überein, obwohl ich verwendet habe66%
.
HTML:
<div class="special-container">
<div class="special-container-inner">
<div class="special-container-column-L">
<img src="http://placehold.it/1070x600" />
</div>
<div class="special-container-column-R">
<img src="http://placehold.it/530x345" />
<h3>Test</h3>
<p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
</div>
<div class="clear"></div>
</div>
</div>
CSS:
.special-container {}
.special-container-inner {max-width:1600px;margin:0 auto;
background: #ff0000;
background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 66%, #2989d8 66%, #2989d8 66%, #2989d8 100%, #207cca 100%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(66%,#ff0000), color-stop(66%,#2989d8), color-stop(66%,#2989d8), color-stop(100%,#2989d8), color-stop(100%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
background: -o-linear-gradient(left, #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
background: linear-gradient(to right, #ff0000 0%,#ff0000 66%,#2989d8 66%,#2989d8 66%,#2989d8 100%,#207cca 100%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#7db9e8',GradientType=1 );
}
.special-container-column-L {width:66%;float:left;text-align:right;}
.special-container-column-L img {display:inline-block;vertical-align:top;max-width:100%;opacity:0.8;}
.special-container-column-R {padding-left:66%;}
.special-container-column-R img {display:inline-block;vertical-align:top;max-width:100%;width:100%;opacity:0.9;}
.clear {clear:both;}
Bildschirmfoto:
Ich habe benutztColorzilla-Generator um den Farbverlauf zu erzeugen.
Gibt es Fehlerberichte oder Problemumgehungen für diese Art von Problem?