webkit-box-отражает ошибку на андроид

Question

Я пытаюсь добавить отражение в мобильном приложении для просмотра веб-страниц (android и ios: только webkit).Я реализовал WebKit-Box-Reflect, как я видел на довольно хороших сайтах, включая StackOverflow.

"-webkit-box-reflect: below -14px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));"

Я получаю это на Android

И что-то подобное на всех других WebKit

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

У кого-нибудь есть идея?все сайты, которые я видел, не упоминают Android или просто показывают их работу на простом фоне ...

Answer 1

Браузер Android не поддерживает градиенты веб-наборов, так как маски на коробках отражаются.Как отметил Ali.MD, вы можете использовать PNG изображения для масок.

Чтобы не добавлять еще один HTTP-запрос, вы также можете преобразовать PNG в URI данных, например, http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/:

img {
  -webkit-box-reflect: below 0 
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAyCAYAAACUEBHwAAAAIklEQVQ4jWP8//8/AzpgwhAZFRwVHBUctIIsDAwMXFQWBAAW4QORoT0UUQAAAABJRU5ErkJggg==);
}

Answer 2

Используйте прозрачное изображение для маски

-webkit-box-refle: ниже 0px url ('image.png');

это работает для меня в Android 2.3