Baseflow / Baseflow/LottieXamarin

Xamarin iOS - animation scaling out of bounds

Open
#387 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
C#
Stars
1.2k
Forks
253
PR merge metrics
No merged PRs in 30d

Description

## 🐛 Bug Report

If you put an animation in a grid, or a stacklayout, or anything, and set the Scale (or even if you leave the default), it scales
right over and outside of the bounds of a StackLayout or Grid entry, even the entire screen sometimes.

Using HeightRequest / WidthRequest also does not seem to be honoured correctly.

It seems line 42 in AnimationViewRenderer for Ios is the problem.

It is forcing ScaleAspectFit.

What if you want any of the other options, like ScaleAspectFill? This is not revealed through the interface although it looks like somebody made some attempt at adding a property for "ScaleType".

What happens if you don't want any scaling? The animation must be "as is" (according to the scale you specified), but must just be
"clipped" at the edges where it overflows the size of the StackLayout or Grid entry.

The problem is if you have an animation and you would like to set the scale (to say 2), then it scales, but it goes out of bounds
of the cell for a grid...it should be possible to scale, and the scaling should happen, but then the animation should be "clipped" to
the bounds it is in...and not overrun outside that and flow all over the screen (into different grid cells, and so forth)

I have attached a sample Xamarin Forms solution where you can see the problem in iOS...(it seems OK in Android, for some reason).

### Expected behavior

it should be possible to scale, and the scaling should happen, but then the animation should be "clipped" to
the bounds it is in...and not overrun outside that and flow all over the screen (into different grid cells, and so forth)

### Reproduction steps

Try this grid in a Xamarin Forms project and run it on an iOS device...you will quickly see the problem...grid row 1, column 1 should not be overflowing the animation into grid row 0 column 1, it should keep the scale of the animation but "clip" the edges when it reaches the boundaries of grid row 1, column 1 :
































### Configuration

**Version:** 1.x

**Platform:**
- [ ] :iphone: iOS
[App7.zip](https://github.com/Baseflow/LottieXamarin/files/9837328/App7.zip)

- [ ] :robot: Android
- [ ] :checkered_flag: WPF
- [ ] :earth_americas: UWP
- [ ] :apple: MacOS
- [ ] :tv: tvOS
- [ ] :monkey: Xamarin.Forms

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied Xamarin.Forms grid sample on iOS, then inspect the iOS AnimationViewRenderer around line 42 and trace how Scale and the renderer's sizing behavior are applied. Confirm the expected behavior for scaled animations inside Grid or StackLayout bounds, including clipping and HeightRequest/WidthRequest, and validate the result against the sample.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp, ios
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.