flutter_svg
flutter_svg copied to clipboard
dnfield
BUG: Weird result with scroll
As you can see in the video below, the SVG disappears somehow. It seems related to the SVG area not being not completely visible.
https://user-images.githubusercontent.com/30930222/134613436-5bf585ff-4fb9-4e70-9a17-a71565ec092d.mov
Do you know why this is happening? Can it be solved by changing the value of some parameters? I believe this is a bug, but I am not entirely sure.
Does this reproduce on a real device? If so, can you share a minimal reproduction?
It does reproduce on a real device in the latest version of master. A minimal reproducible can be found here: https://github.com/LucaDillenburg/Flutter-SVG-Issue-Report The issue only appears in the web. It runs correctly in iOS.
Do you have any idea why this is happening? I really need this to be fixed and I can help if you want me to. No experience with this package code, though.
It would be really helpful if you could bisect this to a specific version of flutter, e.g. using git bisect.
@dnfield I am having the exact same issue in Web Html renderer. And we need the html renderer unfortunately. Our web app is going to be opened through Instagram links so will be displayed in a webview in instagram and load times are essenstial.
You can see from the video that vertical GridView scrolling do not change the svg rendering but scrolling the horizontal PageView affects the SVG rendering.
Look at the 2 SVGs at the header. The SVGs in the GridView items are somehow not affected as much by this bug. Mostly the Location and Verified svgs.
https://user-images.githubusercontent.com/6442915/140411236-e8a5ae53-ba80-464a-8d28-734f966d75a5.mov
Using: flutter_svg: ^0.23.0+1 Flutter 2.5.3 stable
I don't believe this is a bug in flutter_svg. But again, the same ask: do you have a small reproduction of this, and/or can you bisect it to a particular commit in Flutter where it started happening (if it ever didn't happen).
This bug also happend to me on mobile browsers (Chrome, Firefox and Safari) on the other side it worked as expected on the same desktop apps.
flutter_svg v1.0.0
Flutter:
[✓] Flutter (Channel stable, 2.5.3, on macOS 12.0.1) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 4.1) [✓] VS Code (version 1.62.3)
Ok I found that this happens when your SVG has masked content, remove the masked part and it will show as expected, perhaps this is a partial solution.
@zphoenixz thanks for the investigation. @dnfield does flutter_svg support masked content in svgs? Is there a specific reason why they work fine in canvasKit web and mobile native but not in html? Is it something about flutter web engine?
It's probably a bug in the html backend mask impl. Can you share an example a svg?
It's probably a bug in the html backend mask impl. Can you share an example a svg?
Perhaps, I noticed that this also happens when using ClipOval, in short; it doesn't clip at all xd
For example this is one of the problematic svgs in html
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 0C6.6675 0 7.98 0.5775 8.9775 1.5225C9.9225 2.52 10.5 3.8325 10.5 5.25C10.5 8.1375 8.1375 10.5 5.25 10.5C2.3625 10.5 0 8.1375 0 5.25C0 2.3625 2.3625 0 5.25 0ZM4.51483 7.34981C4.6391 7.34981 4.70584 7.30985 4.80168 7.21421L7.78932 3.7365C7.94716 3.57433 7.87559 3.34051 7.66721 3.20188C7.49656 3.11567 7.29357 3.13593 7.1622 3.26701L4.45761 6.44726L3.25997 5.25214C3.11195 5.10443 2.88403 5.10443 2.73601 5.25214C2.588 5.39985 2.588 5.62729 2.73601 5.775L4.22799 7.26384L4.3159 7.30018C4.31708 7.30018 4.33641 7.30544 4.37605 7.31863C4.44831 7.34266 4.47456 7.34981 4.51483 7.34981Z" fill="#375FED"/>
</svg>
Then maybe the assumption of this problem being caused only by masks is wrong.
Sure, but your example does not cause problems when I try it in a local demo in Chrome.