CSS непрозрачность SVG проблема с iOS

Question

Я только что сделал веб-сайт, и для определенной обертки я использую

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:rgba(248,0,0,0.63)' /%3E%3C/svg%3E");

, теперь эффект непрозрачности отлично работает на десктопном и Android-браузере.

Однако для iOS (как для iphone, так и для ipad) цвет становится сплошным.

, который удаляет весь эффект, предназначенный для веб-сайта

Спасибо за любой вклад:)

Answer 1

Попробуйте добавить

visibility: visible; 

к элементу.

Это ответ, который я нашел здесь: http://www.punkchip.com/css-opacity-not-working-in-ios/

Answer 2

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

polygon points='0,100 100,0 100,100' style='fill:rgba(248,0,0,0.63)'

изменить на

polygon points='0,100 100,0 100,100' fill='rgb(240,0,0)' fill-opacity='0.63'