Repository: flutter
Issue: [flutter_svg] BUG: Weird result with scroll
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/603_

Original report by @LucaDillenburg on Sep 24, 2021

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.

---
Comment by @dnfield on Sep 24, 2021
Does this reproduce on a real device? If so, can you share a minimal reproduction?

---
Comment by @dnfield on Sep 24, 2021
(Also, does it reproduce on the latest version of master flutter)

---
Comment by @LucaDillenburg on Sep 24, 2021
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.

---
Comment by @LucaDillenburg on Sep 27, 2021
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.

---
Comment by @dnfield on Sep 27, 2021
It would be really helpful if you could bisect this to a specific version of flutter, e.g. using `git bisect`.

---
Comment by @aytunch on Nov 4, 2021
@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

---
Comment by @dnfield on Nov 4, 2021
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).

---
Comment by @zphoenixz on Dec 2, 2021
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)

---
Comment by @zphoenixz on Dec 3, 2021
> 

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.

---
Comment by @aytunch on Dec 3, 2021
@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?

---
Comment by @dnfield on Dec 3, 2021
It's probably a bug in the html backend mask impl.  Can you share an example a svg?

---
Comment by @zphoenixz on Dec 3, 2021
> 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

---
Comment by @aytunch on Dec 8, 2021
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>

```


---
Comment by @dnfield on Dec 8, 2021
But that SVG doesn't have masks...

---
Comment by @aytunch on Dec 9, 2021
Then maybe the assumption of this problem being caused only by masks is wrong.

---
Comment by @dnfield on Dec 9, 2021
Sure, but your example does not cause problems when I try it in a local demo in Chrome.