Overlay appears panned to a side

[jagomf]

I have a DescribedFeatureOverlay on a center-docked FAB, and only on iOS the overlay appears panned to the left side:

(In the screenshot, the FAB's icon is pulsating, that's why it looks so big).

As mentioned, it is only happening on iOS (on Android it looks fine).

This is my code in case it helps:

DescribedFeatureOverlay(
  featureId: featureId,
  targetColor: localTheme.accentColor,
  tapTarget: Icon(CupertinoIcons.person_add_solid),
  contentLocation: ContentLocation.above,
  title: const Text('More fun with Friends'),
  child: FloatingActionButton(
    child: const Icon(CupertinoIcons.person_add_solid),
    onPressed: ...
  )
  description: Column(
    children: [
      const Text('Add your Friends [...]'),
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: RaisedButton(child: const Text('GOT IT!'), onPressed: () { FeatureDiscovery.completeCurrentStep(context); }),
      )
    ],
  )
)

Also as mentioned, FAB's floatingActionButtonLocation is FloatingActionButtonLocation.centerDocked.

Why is that overlay panned? What can I do? Is that a bug?

Using Flutter 1.22, macOS 10.15.7, Xcode 12.0.1, feature_discovery: ^0.12.0+2

[ayalma]

Try to use overflowMode: OverflowMode.extendBackground, on DescribedFeatureOverlay

[jagomf]

Background gets wider and text can be read, but background circle is still panned to the left side, not centered.

[ayalma]

Can you provide some code pls