Hello everyone, I would like to report the following bug connected to the ion-virtual-scroll ionic element, and with it’s translate3d formula.
So, we have a list of users… Sometimes this list can contain up to 3k of elements. We decided to pass from a normal generation of the user’s list to a virtual loading one using ion-virtual-scroll.
Here is the header definition:
<ion-virtual-scroll [items]=“userList” approxItemHeight=“90px” approxHeaderHeight=“30px”
[itemHeight]=“itemHeightFn” [headerFn]=“myHeaderFn” [footerFn]=“myFooterFn” [headerHeight]=“headerHeightFn”>
So, indeed, as it was advised from the component’s documentation, we do set a height of the item. itemHeightFn is also 90px.
transform: translate3d(0, 0, 0). Starts from point Zero.
Everything works fine in normal use app.
The issue comes when you pass on Iphone in voiceover mode.
on right swipe… first element is border highlight well.
another swipe… the second element is being read but the voiceover selection contains the area of two elements. (second and third element)
another swipe… the third element is being read but the voiceover selection contains the area of three elements (starting from the third element down: an area associated to 3 - 4 - 5th element)
and so on… until the border selection area is higher than the phone screen area, and the scroll gets blocked.
In inspect, the elements have the correct height measure. Trying to work on the translate3d we notice that is the translate3d function that rules the border selection area.
We have tried to control the item height with various css rules, but no solution worked.