Почему Google Chrome изменяет непрозрачность фона?

Ответ 1

Как указано Quentin, это проблема с плавающей точкой IEEE.

0.1 фактически не существует в десятичной плавающей запятой технически просто из-за того, как работает двоичный файл.

0.1 - одна десятая, или 1/10. Чтобы показать его в двоичном формате, разделите двоичный код 1 на двоичный код 1010, используя двоичное длинное деление:

Как вы можете видеть, 0.1 в двоичном формате 0.0001100110011....0011, и он будет продолжать повторять 0011 в конце до бесконечности.

Браузеры выбирают ближайшую доступную точку для 0.1 и используют ее как непрозрачность. Некоторые перейдут, а некоторые подойдут.

FireFox я бы догадался, что он просто показывает читаемую человеком версию, но на самом деле ее действительно использует плавающую точку, пригодную для использования компьютером.

В качестве примера:

body {
    color: rgba(0,0,0,0.1); // actually 0.0980392
    opacity: 0.1; // actually 0.100000001490116
}

Два совершенно разных значения для одной и той же точки с плавающей запятой.

Эта проблема с плавающей запятой действительно может быть реплицирована в другом месте в браузерах, используя другие языки, такие как Javascript. Номера Javascript всегда 64-битные с плавающей запятой (что, я считаю, CSS тоже). Это более широко известно как плавающая точка с двойной точностью. PHP также использует плавающие точки с двойной точностью.

64-битные числа с плавающей запятой, как вы могли догадаться, хранились в 64 битах, где число (дроби) хранится в битах от 0 до 51, показатель в битах 52-62 и знаковый бит 63.

Это вызывает проблемы в строке, так как это означает, что целые числа считаются точными до 15 десятичных точек и могут действительно вычислять до 17 десятичных точек.

Это означает, что числа могут округляться очень легко или просто не могут быть сохранены правильно.

var x = 999999999999999;  // x = 999999999999999
var y = 9999999999999999; // y = 10000000000000000

Арифметика для плавающих точек также может быть вне выравнивания довольно много в местах. Как я показал выше; 0.1 в десятичном значении не актуально 0.1, но 0.000110011... и т.д. Это означает, что некоторые основные математические данные могут быть совершенно неправильными.

var x = 0.2 + 0.1; // x = 0.30000000000000004

В итоге вам придется запутать систему, чтобы получить нужный номер. Это можно сделать * числом 10 и затем делить его, чтобы получить ваш фактический желаемый результат.

var x = (0.2 * 10 + 0.1 * 10) / 10; // x = 0.3

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

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

• Изучение двоичных файлов - Почему 0,1 не существует
• Javascript Numbers
• Википедия - плавающая точка IEEE
• Википедия - с плавающей запятой с двойной точностью