flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
164.79k stars 27.16k forks source link

[Impeller] Scroll on CupertinoPicker on iOS leads to error: could not find font/glyph position in the atlas #153392

Closed victorsanni closed 1 week ago

victorsanni commented 1 month ago

Steps to reproduce

  1. Run sample code
  2. Click on the 'Date' picker
  3. Scroll fast on the year column

Expected results

No errors

Actual results

[ERROR:flutter/impeller/entity/contents/text_contents.cc(196)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas.
[ERROR:flutter/impeller/entity/contents/text_contents.cc(228)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas.

Code sample

Sample Code ```dart import 'package:flutter/cupertino.dart'; /// Flutter code sample for [CupertinoDatePicker]. void main() => runApp(const DatePickerApp()); class DatePickerApp extends StatelessWidget { const DatePickerApp({super.key}); @override Widget build(BuildContext context) { return const CupertinoApp( theme: CupertinoThemeData(brightness: Brightness.light), home: DatePickerExample(), ); } } class DatePickerExample extends StatefulWidget { const DatePickerExample({super.key}); @override State createState() => _DatePickerExampleState(); } class _DatePickerExampleState extends State { DateTime date = DateTime(2016, 10, 26); DateTime time = DateTime(2016, 5, 10, 22, 35); DateTime dateTime = DateTime(2016, 8, 3, 17, 45); // This function displays a CupertinoModalPopup with a reasonable fixed height // which hosts CupertinoDatePicker. void _showDialog(Widget child) { showCupertinoModalPopup( context: context, builder: (BuildContext context) => Container( height: 216, padding: const EdgeInsets.only(top: 6.0), // The Bottom margin is provided to align the popup above the system // navigation bar. margin: EdgeInsets.only( bottom: MediaQuery.of(context).viewInsets.bottom, ), // Provide a background color for the popup. color: CupertinoColors.systemBackground.resolveFrom(context), // Use a SafeArea widget to avoid system overlaps. child: SafeArea( top: false, child: child, ), ), ); } @override Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: const CupertinoNavigationBar( middle: Text('CupertinoDatePicker Sample'), ), child: DefaultTextStyle( style: TextStyle( color: CupertinoColors.label.resolveFrom(context), fontSize: 22.0, ), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ _DatePickerItem( children: [ const Text('Date'), CupertinoButton( // Display a CupertinoDatePicker in date picker mode. onPressed: () => _showDialog( CupertinoDatePicker( initialDateTime: date, mode: CupertinoDatePickerMode.date, use24hFormat: true, // This shows day of week alongside day of month showDayOfWeek: true, // This is called when the user changes the date. onDateTimeChanged: (DateTime newDate) { setState(() => date = newDate); }, ), ), // In this example, the date is formatted manually. You can // use the intl package to format the value based on the // user's locale settings. child: Text( '${date.month}-${date.day}-${date.year}', style: const TextStyle( fontSize: 22.0, ), ), ), ], ), _DatePickerItem( children: [ const Text('Time'), CupertinoButton( // Display a CupertinoDatePicker in time picker mode. onPressed: () => _showDialog( CupertinoDatePicker( initialDateTime: time, mode: CupertinoDatePickerMode.time, use24hFormat: true, // This is called when the user changes the time. onDateTimeChanged: (DateTime newTime) { setState(() => time = newTime); }, ), ), // In this example, the time value is formatted manually. // You can use the intl package to format the value based on // the user's locale settings. child: Text( '${time.hour}:${time.minute}', style: const TextStyle( fontSize: 22.0, ), ), ), ], ), _DatePickerItem( children: [ const Text('DateTime'), CupertinoButton( // Display a CupertinoDatePicker in dateTime picker mode. onPressed: () => _showDialog( CupertinoDatePicker( initialDateTime: dateTime, use24hFormat: true, // This is called when the user changes the dateTime. onDateTimeChanged: (DateTime newDateTime) { setState(() => dateTime = newDateTime); }, ), ), // In this example, the time value is formatted manually. You // can use the intl package to format the value based on the // user's locale settings. child: Text( '${dateTime.month}-${dateTime.day}-${dateTime.year} ${dateTime.hour}:${dateTime.minute}', style: const TextStyle( fontSize: 22.0, ), ), ), ], ), ], ), ), ), ); } } // This class simply decorates a row of widgets. class _DatePickerItem extends StatelessWidget { const _DatePickerItem({required this.children}); final List children; @override Widget build(BuildContext context) { return DecoratedBox( decoration: const BoxDecoration( border: Border( top: BorderSide( color: CupertinoColors.inactiveGray, width: 0.0, ), bottom: BorderSide( color: CupertinoColors.inactiveGray, width: 0.0, ), ), ), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: children, ), ), ); } } ```

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output ```console Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel master, 3.24.0-1.0.pre.570, on macOS 14.6.1 23G93 darwin-arm64, locale en) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.4) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.3) [✓] VS Code (version 1.88.1) [✓] Connected device (4 available) [✓] Network resources ```
huycozy commented 4 weeks ago

I can also reproduce this issue on Flutter stable 3.24.0 and master 3.24.0-1.0.pre.575 with iPhone 15 Pro, iOS 17.5 (emulator). I also checked this on my physical device iPhone 7, iOS 15.8 but the issue didn't happen there.

flutter doctor (stable and master) ```console [✓] Flutter (Channel stable, 3.24.0, on macOS 14.6 23G80 darwin-x64, locale en-VN) • Flutter version 3.24.0 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 80c2e84975 (7 days ago), 2024-07-30 23:06:49 +0700 • Engine revision b8800d88be • Dart version 3.5.0 • DevTools version 2.37.2 ``` ```console [!] Flutter (Channel master, 3.24.0-1.0.pre.575, on macOS 14.6 23G80 darwin-x64, locale en-VN) • Flutter version 3.24.0-1.0.pre.575 on channel master at /Users/huynq/Documents/GitHub/flutter_master ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 593729165d (86 minutes ago), 2024-08-14 09:13:34 +0800 • Engine revision 019f9e3f07 • Dart version 3.6.0 (build 3.6.0-146.0.dev) • DevTools version 2.38.0 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. ```
zuhabul commented 3 weeks ago

Same issue happening with CupertinoPicker as well!

Sample Code
```dart Widget _buildIosDropdown(BuildContext context) { return InkWell( splashColor: Colors.transparent, highlightColor: Colors.transparent, onTap: widget.enabled ? () => showCupertinoModalPopup( context: context, builder: (_) => Container( height: 250, decoration: BoxDecoration( color: CupertinoColors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(10), topRight: Radius.circular(10), ), ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ CupertinoButton( child: Text('Dismiss', style: context.titleMedium?.copyWith( color: Colors.red, fontSize: 16.sp, fontFamilyFallback: [ GoogleFonts.notoSans().fontFamily! ], )), onPressed: () { Navigator.pop(context); }, ), Spacer(), CupertinoButton( child: Text('Done', style: context.titleMedium?.copyWith( color: Colors.blue, fontSize: 16.sp, fontFamilyFallback: [ GoogleFonts.notoSans().fontFamily! ], )), onPressed: () { Navigator.pop(context); }, ), ], ), Spacer(), Container( height: 190, color: CupertinoColors.white, child: CupertinoPicker( itemExtent: 32.0, onSelectedItemChanged: (int index) { widget.onChangeAction(widget.dataList[index]); }, children: widget.dataList.map((String value) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Expanded( child: Text( value, style: context.titleSmall?.copyWith( fontSize: 17.sp, fontFamilyFallback: [ GoogleFonts.notoSans().fontFamily! ], ), overflow: TextOverflow.ellipsis, maxLines: 1, textAlign: TextAlign.center, ), ), ], ); }).toList(), ), ), Spacer(), ], ), ), ) : null, child: Container( padding: const EdgeInsets.symmetric(horizontal: 10.0), child: Row( children: [ Expanded( child: Text( widget.dropdownValue1, style: context.titleMedium?.copyWith( fontSize: 16.sp, color: Colors.black87, fontWeight: FontWeight.w400, ), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), Icon( CupertinoIcons.chevron_down, size: 20.sp, ), ], ), ), ); } ```
Error Log
``` [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find glyph position in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. [ERROR:flutter/impeller/base/validation.cc(59)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not find font in the atlas. ```
Flutter Doctor
``` Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.24.0, on macOS 14.6.1 23G93 darwin-x64, locale en-GB) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.4) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.2) [✓] VS Code (version 1.92.2) [✓] VS Code (version 1.79.0-insider) [✓] Connected device (3 available) [✓] Network resources • No issues found! ```

Update

Disabling the Impeller on iOS in app's Info.plist file fixes the error.

<key>FLTEnableImpeller</key>
 <false />

But again this also produce this following warning !

[IMPORTANT:flutter/shell/common/shell.cc(456)] [Action Required] The application opted out of Impeller by either using the --no-enable-impeller flag or FLTEnableImpeller=false plist flag. This option is going to go away in an upcoming Flutter release. Remove the explicit opt-out. If you need to opt-out, report a bug describing the issue.
[IMPORTANT:flutter/shell/platform/darwin/graphics/FlutterDarwinContextMetalSkia.mm(71)] Using the Skia rendering backend (Metal).
Installing and launching...                                        63.0s
victorsanni commented 3 weeks ago

I wonder if this also happens with ListWheelScrollView used by CupertinoPicker as well.

zuhabul commented 3 weeks ago

It's a bug related to Impeller rendering since it works fine with Skia rendering. ListWheelScrollView could cause this as it only gets produced when scrolling the items slowly or randomly.