CODEWITHSUNDEEP
javascriptcsssvgsafarisvg-filters
房启俊
房启俊

Reputation: 11

SVG filter disappear on iOS-Safari

In iOS Safari, the second rect disappears, why? I expect it to display properly in iOS.

    <svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%">
                <feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
                <feComponentTransfer result="blur">
                    <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
                </feComponentTransfer>
                <feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood>
                <feComposite in="color" in2="blur" operator="in" result="glow"></feComposite>
                <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
                <feOffset dx="0" dy="0"></feOffset>
                <feComponentTransfer result="shadow">
                    <feFuncR type="table" tableValues="1 1"></feFuncR>
                    <feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
                    <feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
                    <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
                </feComponentTransfer>
                <feComposite in="glow" in2="shadow" operator="over" result="highlight" />
                <feComposite in="SourceGraphic" in2="highlight" operator="over" />
            </filter>
        </defs>

        <g transform="translate(0,25)">
            <rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect>

            <rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect>
        </g>
    </svg>

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
</head>
<body>
    <svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <filter id="myfilter" width="180%" height="160%" y="-30%" x="-40%">
                <feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
                <feComponentTransfer result="blur">
                    <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
                </feComponentTransfer>
                <feFlood flood-color="#221D4E" flood-opacity="0.9" result="color"></feFlood>
                <feComposite in="color" in2="blur" operator="in" result="glow"></feComposite>
                <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
                <feOffset dx="0" dy="0"></feOffset>
                <feComponentTransfer result="shadow">
                    <feFuncR type="table" tableValues="1 1"></feFuncR>
                    <feFuncG type="table" tableValues="0.67 0.67"></feFuncG>
                    <feFuncB type="table" tableValues="0.21 0.21"></feFuncB>
                    <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
                </feComponentTransfer>
                <feComposite in="glow" in2="shadow" operator="over" result="highlight" />
                <feComposite in="SourceGraphic" in2="highlight" operator="over" />
            </filter>
        </defs>

        <g transform="translate(0,25)">
            <rect width="100" height="100" fill="red" x="100" style="filter:url(#myfilter)"></rect>

            <rect width="100" height="20000" fill="red" x="250" style="filter:url(#myfilter)"></rect>
        </g>
    </svg>
</body>
</html>

chrome enter image description here

iOS Safari enter image description here

I expect it to display properly in iOS

Upvotes: 1

Views: 294

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31705

iOS has a lot of memory optimizations. Your second rect is very large and mostly outside the initial viewBox, so iOS does not render the filter because it's taking up too much memory for off-screen rendering.

When you change the height of the rect (I'm on iPhone 12 Pro (128GB), iOS 16.1.1), the second rect disappears exactly at height = "6473" - so the largest rect height that this filter will support is 6472 on my phone.

Does this make any sense - probably not, but welcome to Apple's web team.

Upvotes: 3

Related Questions