Margin & Float Pixelate Linear Gradient (Chrome bug?)

В следующем скрипте блок выглядит хорошо, если вы закомментируете свойства margin/float CSS.Margin & Float Pixelate Linear Gradient (Chrome bug?)

Почему градиент перепутал их с ними?

К «Перепутались» я имею в виду (обратите внимание на линии не гладкие):

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

Fiddle

.rec { 
    margin: 10px; 
    float: left; 
    height: 50px; 
    width: 50px; 
    background: linear-gradient(135deg, rgb(134, 108, 83) 0%, rgb(134, 108, 83) 12.5%, rgb(127, 107, 86) 12.5%, rgb(127, 107, 86) 25%, rgb(228, 175, 104) 25%, rgb(228, 175, 104) 37.5%, rgb(254, 221, 139) 37.5%, rgb(254, 221, 139) 50%, rgb(48, 44, 43) 50%, rgb(48, 44, 43) 62.5%, rgb(237, 232, 226) 62.5%, rgb(237, 232, 226) 75%, rgb(200, 193, 192) 75%, rgb(200, 193, 192) 87.5%, rgb(157, 151, 151) 87.5%, rgb(157, 151, 151) 100%); 
}

Я делаю этот тест на Chrome 48.0.2564.116 (64-битный)

Обновление:

Как указывалось Lester, -webkit-backface-visibility: hidden; фиксирует это. Оказывается, -webkit-transform: translate3D(0,0,0); исправляет это. Может быть, любая команда адресации -webkit по какой-то причине сделает трюк.

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

источник

2016-03-03 Omri Aharon

Я не вижу никакой разницы в градиенте, если удалить эти два свойства. – sma

@ Харри Да, один момент. –

@sma Обновлено, это более ясно? –

-webkit-backface-visibility: hidden;

Это может решить проблему в хроме, так как в другом браузере алиас работает отлично

источник

2016-03-03 14:58:08

Хорошо, кажется, что исправлено, но почему? Хром испортил спину и фронт элемента? Является ли хром самой ошибкой? Спасибо :) –

Ну, я не знаю в 100%, но причина может заключаться в том, что градиент (математически говоря) иногда НЕ плоский, и это может привести к виду трехмерных слоев, поэтому браузеры не отображают его так что важно «сделать их плоскими», чтобы избежать этих грязных краев, поэтому их скрывать скрывают :) –

Это имеет смысл. Моментальная заметка о будущем :) –

Margin & Float Pixelate Linear Gradient (Chrome bug?)

ответ

Смежные вопросы