Clip-path в Chrome оставляет странную линию на краю

Я использую clip-path, чтобы создать особую форму синей кнопки поиска.

В Chrome вы видите странную полосу у края выреза, а в Firefox все в порядке.

Я не первый, кто указывает на это, но я не нашел решения.

Хром

введите здесь описание изображения

Файрфокс

введите здесь описание изображения

Клип-путь:

clip-path: polygon(0 0, 0 100%, 15px 50%);

Что это за загадка? Я также нашел похожую проблему:

CSS - Странная граница появляется на мобильном устройстве Chrome с путем клипа


google-chrome css clip-path
person Federico Liva    schedule 26.07.2018    source источник
comment
можешь поделиться своим кодом?   -  person Temani Afif    schedule 26.07.2018

Ответы (2)


arrow_upward
3
arrow_downward

У меня была аналогичная проблема, когда правый край пути клипа находился внутри 100%. Я смог исправить это, установив значения координаты x правого края на 101% и добавив overflow: hidden; к родительскому элементу.

clip-path: polygon(0 0, 101% 0, 101% 80%, 0 100%);

Я полагаю, вы могли бы сделать то же самое с левой стороны, введя отрицательные значения?

Изображение до исправления

Изображение после исправления

person shaneSC    schedule 03.02.2020
comment
Я также обнаружил это. Отрицательные значения работают. Мне нравится этот метод, потому что он не имеет побочных эффектов. - person IOIIOOIO; 09.04.2020
comment
Мне пришлось сбить верхний левый и верхний правый угол в отрицательные значения по оси Y, чтобы заставить это работать... и это сработало - person scriptmonkey; 20.09.2020

arrow_upward
2
arrow_downward

У меня была похожая (если не такая же) проблема, я исправил ее, добавив следующий стиль к элементу с clip-path:

 transform: translateZ(0)
person Neaox    schedule 09.01.2019
comment
или transform:scaleZ(1) короче - для любителей cssbattle :) - person Esger; 17.08.2019