Градиентный текст с backgroud-clip: свойство текста в Mac Safari нарушается - PullRequest
Новая
       31

Градиентный текст с backgroud-clip: свойство текста в Mac Safari нарушается

0 голосов
/ 04 февраля 2019

Текст градиента со свойством background-clip портится в Mac Safari следующим образом http://prntscr.com/mgd5tz. Вот мой код для текста градиента в диапазоне 

.text-grad {
	background: -moz-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, #97c74e), color-stop(100%, #2ab9a5));
	background: -webkit-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	background: -o-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	background: -ms-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	background: linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text;
	-o-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	-ms-text-fill-color: transparent;
	-o-text-fill-color: transparent;
	text-fill-color: transparent;
	opacity: 1;
	z-index: 9;
}
<h2>Lorem ipsum <span class="text-grad"> deep understanding </span> of the project</h2>

1 Ответ

0 голосов
/ 04 февраля 2019

Добавление дисплея: встроенный блок;может работать 

.text-grad {
  display: inline-block;
	background: -moz-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, #97c74e), color-stop(100%, #2ab9a5));
	background: -webkit-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	background: -o-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	background: -ms-linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	background: linear-gradient(150deg, #97c74e 0%, #2ab9a5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 );
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text;
	-o-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	-ms-text-fill-color: transparent;
	-o-text-fill-color: transparent;
	text-fill-color: transparent;
	opacity: 1;
	z-index: 9;
}
   <h2>Lorem ipsum <span class="text-grad"> deep</span> <span class="text-grad">understanding </span> of the project</h2>
...