Какая разница между rgba (0,0,0,0) и прозрачной?

В один из моих других вопросов решение по устранению проблемы с рендерингом состояло в использовании значения rgba(255, 255, 255, 255) вместо transparent. Мы протестировали с помощью rgba(0, 0, 0, 0) и это все еще исправляло проблему, а это означает, что определение transparent вызывает ошибку. Однако, глядя на Спецификация W3C CSS3 (и ссылка MDN) для transparent показывает, что rgba(0, 0, 0, 0) и transparent должны быть равны:

прозрачный

Полностью прозрачный. Это ключевое слово можно считать сокращение для прозрачного черного, rgba (0,0,0,0), которое вычислено значение.

Итак, что дает? Почему два, казалось бы, одинаковые значения дают разные результаты? Я просмотрел форматирование RGBA и искал похожие вопросы (безрезультатно). Каждый вопрос/ответ, в котором упоминается преобразование из transparent в rgba(0,0,0,0), всегда содержит слова "должен" или "соответствовать" (например, здесь). Какова фактическая разница и почему она так сильно меняет результат?

N.B: Это происходит в большинстве, если не во всех, версиях Internet Explorer. Мы также знаем, что это происходит в некоторых версиях Firefox. Однако Chrome и Safari не отображают это поведение, заставляя нас полагать, что для этого есть какой-то патч в -webkit.

Чтобы представить это как ошибку, нам нужно воспроизвести проблему, используя минимальное количество кода. Итак, перенесенный из моего другого вопроса, вот сравнение использования transparent vs rgba(0,0,0,0), и что происходит, когда мы используем оба.

Прозрачный

@keyframes spin{
	0% {transform:rotateZ(0deg);}
	50% {transform:rotateZ(360deg);border-radius:60%;}
	100%{transform:rotateZ(720deg);}
}
.spinme{
	display:inline-block;
	position:relative;
	left:0;
	top:0;
	margin:0.2rem;
	width:0.8rem;
	height:0.8rem;
	border:0.2rem solid black;
	border-radius:0%;
	outline: 1px solid transparent;
	transform:rotateZ(0deg);
	animation: spin infinite 4s;
}
<div class="spinme"></div>

ОТВЕТЫ

Ответ 1

rgba() - это функция, которая вычисляет цвет и прозрачность для элемента, очень полезна, когда вы хотите контролировать цвет и альфу элемента, особенно если вы не хотите полностью прозрачно. Являясь функцией, вы сообщаете браузеру, какой цвет и прозрачность вы хотите нарисовать, это ближе к JS, чем CSS.

С другой стороны, "прозрачный" - это свойство CSS, которое идентифицирует элемент, будет полностью прозрачным, не делая вычисления цвета и альфы. Являясь свойством CSS, а не функцией, каждый браузер применяет его по-другому, поэтому он будет сильно отличаться от метода, используемого браузером для применения этого свойства.

ИЗМЕНИТЬ Хорошо, вы говорите, что я противоречу этому в своем ответе:

прозрачный

Полностью прозрачный. Это ключевое слово можно считать сокращением для прозрачный черный, rgba (0,0,0,0), который является его вычисленным значением.

Ну, я не противоречу этому. Одна вещь - спецификация стандарта W3C, а другая - реализация этого стандарта разработчиками разных браузеров. Я не буду нарушать код IE, чтобы доказать, что я говорю, потому что это немного незаконно, прямо попросите ребят из Microsoft увидеть их ответ.

То, что я вам сказал, это то, что они - браузеры, которые не обрабатывают прозрачные и rgba (0, 0, 0, 0) таким же образом. Это потому, что прозрачное свойство намного старше функции rgba (0, 0, 0, 0) (вам нравится больше, чем rgba()?), И, скорее всего, хотя для IE разработан эффективный метод для rgba (r, g, b, a), они все еще используют старый метод с прозрачным свойством.

Одна вещь, которую вы всегда должны иметь в виду, заключается в том, что веб-браузер не соответствует стандартам W3C до 100%, поэтому в большинстве новых свойств необходимо добавить конкретное расширение производителя (moz-webkit- и т.д.)

Подумайте, почему так абсурдно писать одну и ту же вещь четыре раза, когда все будет решено с использованием стандартного свойства, и вы сами ответите, потому что это не то же самое, что использовать прозрачные и rgba (0, 0, 0, 0) в IE.

Ответ 2

Я пробовал свой код для значения transparent в Chrome, установленном на ноутбуке под управлением операционной системы Windows 7.

Я вообще не получаю никакого колебания. Поэтому я ожидаю, что эта проблема будет специфичной для определенных браузеров и операционных систем на основе того, как этот конкретный браузер и ОС решают сделать ваш элемент.

Эта проблема может быть связана с тем, использует ли ваш браузер аппаратное ускорение или нет. Теперь у вас есть трюк, чтобы заставить ваш браузер использовать аппаратное ускорение: заставьте ваш браузер думать, что к элементу применяется трехмерное преобразование.

Вы могли бы добавить к этому свойству следующие свойства:

.fake3Dtransformation {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

Хотя я не совсем уверен, что это устранит проблему ворчания при использовании transparent (поскольку я не могу воспроизвести проблему), применение этого "хака" должно теоретически всегда давать вам наиболее плавный рендеринг. Проверьте, например. в этой статье для получения дополнительной информации.

Итак, для вашего демо-кода вы получите следующее:

@keyframes spin{
    0% {transform:rotateZ(0deg);}
    50% {transform:rotateZ(360deg);border-radius:60%;}
    100%{transform:rotateZ(720deg);}
}
#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display:inline-block;
    position:relative;
    left:0;
    top:0;
    margin:0.2rem;
    width:0.8rem;
    height:0.8rem;
    border:0.2rem solid black;
    border-radius:0%;
    outline: 1px solid rgba(0,0,0,0);
    animation: spin infinite 4s;
}

#spinme:nth-of-type(2){
    outline: 1px solid transparent;
}
<div id="spinme"></div>
<div id="spinme"></div>

Ответ 3

На мой взгляд, нехорошо использовать один и тот же идентификатор дважды, независимо от того, что вы делаете, это означает идентификатор. Мне также не кажется странным, что оба они показывают анимацию, поскольку оба они имеют одинаковый идентификатор, который соответствует animation в css.

#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display:inline-block;
    position:relative;
    left:0;
    top:0;
    margin:0.2rem;
    width:0.8rem;
    height:0.8rem;
    border:0.2rem solid black;
    border-radius:0%;
    outline: 1px solid rgba(0,0,0,0);
    transform:rotateZ(0deg);

}

#spinme:nth-of-type(1){
    animation: spin infinite 4s;
}

если вы это сделаете, только один дрожит, и это имеет смысл для меня. Возможно, он не отвечает на ваш вопрос о проблеме transparent, но я не уверен, действительно ли это проблема.

изменить Независимо от того, какой цвет я стараюсь, transparent или rgba(0,0,0,0) в любой комбинации, они оба ожидают в Safari.