Приложение iOS 12 cordova: SVG в виде webkit-mask-image показывает странную рамку - PullRequest
Новая
       23

Приложение iOS 12 cordova: SVG в виде webkit-mask-image показывает странную рамку

0 голосов
/ 20 сентября 2018

Я разрабатываю приложение для iOS с cordova и ExtJS 6. Некоторые фоновые изображения показывают странную прямоугольную границу с момента обновления до iOS 12 (значки в красных кружках,в iOS 11 значок правильно отображался как «круг, содержащий i без прямоугольника»): Screenshot_App

Вот так должен выглядеть значок: Screenshot_Icon_Photoshop

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

Это мой CSS для этого элемента (span): Screenshot_CSS 

.elementeTree .myInfo {
  -webkit-mask-image: url('./icons/information.svg');
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 20px;
  background: var(--gray_dark);
}

Это скриншотокружающие элементы: screenshot_dom

Я не могу понять, почему отображается граница, кто-нибудь может помочь?Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

В этом нет большой логики, но эта строка в css исправила мою проблему. 

transform: translate3d(0,0,0);

Css 

.icon {
display:block;
width:20px;
height:20px;    
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% auto;

mask-position: center;
mask-repeat: no-repeat;
mask-size: 100% auto;

transform: translate3d(0,0,0);
}

.i-user{
-webkit-mask-image: url(../images/icons/user.svg);
mask-image: url(../images/icons/user.svg);
}

HTML 

<i class="icon i-user"/>
0 голосов
/ 26 сентября 2018

Мы начали видеть это и в нашем приложении Ionic после выхода ios12.В нашем случае, похоже, что-то связано с тем, что значок внутри прокручиваемого родительского элемента имеет свойство -webkit-overflow-scrolling: touch;.

. Когда я отключаю это правило CSS для прокручиваемого элемента, граница исчезает.Это, конечно, не является исправлением, поскольку нарушает функциональность прокрутки, но с этого нужно начинать.

...