react-virtualized: scrollToIndex not working with CellMeasurer - reactjs

I'm having an issue with CellMeasurer in conjunction with scrollToIndex on a List. If I set scrollToIndex to some large value (presumably any index corresponding to a row preceded by rows that haven't been measured yet), and then I scroll upwards, the scroll seems to reset back to it's original position repeatedly. Eventually it starts resetting higher and higher up, until eventually I've made my way back to the start of the list.
Relevant Plunker--it's a list with 300 elements (all the same static height so CellMeasurer isn't necessary but it illustrates my problem), and I set scrollToIndex to 150. Try scrolling upward.
https://plnkr.co/edit/XPF5D88WI9CErhkmrgAy?p=preview
Understandably the scroll might not be perfectly smooth since the calculations are based on predicted heights and they're not always going to be correct (in practice at least--in this case they will be correct), but this seems particularly bad/unintended. I suspect (and hope) that I'm doing something incorrectly here--would appreciate any thoughts. Thanks.
EDIT:
On my MBP this happens in both Chrome and Firefox, though it looks slightly different depending on which browser I'm using. On Windows, using Chrome, there is some weird flashing of different rows while scrolling up, but it doesn't seem to reset back to 150 at least.
EDIT:
Here's a gif of the issue occurring - this is on Chrome 60.0.3112.113, Mac OS Sierra 10.12.6:

Seems to be a bug, filed here: https://github.com/bvaughn/react-virtualized/issues/803.

Related

How to make sure Android keyboard isn't scrolled to selected line in multi-line TextField?

This question is related to this other one (Android). A sample test case was also provided here
Basically, I can get past the "glitch" of losing the bottom screen under the keyboard that occurs sometimes when a single line TextField is focused by setting the TextField's bottom padding and making it a layer
But when the same glitch occurs to a multi-line TextField, each time the cursor is moved to a different line the keyboard follows the current line and hides everything underneath. I've been looking at TextArea and Component but I can't see anything there that stops this behavior. My "trick" of making the TextField a layer with bottom padding doesn't work in multi-line mode. I'm out of options, could this be enabled or alternatively is there some magic method somewhere I am missing?
Also, I've checked that calling getComponentForm().getInvisibleAreaUnderVKB() returns 0 when the glitch occurs
I think you need to re-open the applicable issue. This code is very platform specific as the virtual keyboard behavior is handled 100% within the Android port.
Android doesn't implement getInvisibleAreaUnderVKB() since the VKB doesn't work that way in Android. It resizes the screen instead to provide the additional space. It will generally try to get the top area where your cursor is. That's the chief goal.
When the screen is empty that might look problematic but when your screen is full of data we'd rather see the data than have the full text component in view. Unfortunately, the native editing code has no way to distinguish between the two cases. We might be able to come up with a workaround but with these things there are often issues/regressions.
Solution to prevent this consists in setting the Form's setFormBottomPaddingEditingMode(true);. Easy fix! 👍

WPF SciCharts Stacked Column Side by Side Spacing

I've noticed a weird issue with SciCharts on WPF and am trying to understand if the issue is something within our control or not.
I'm noticing, in particular, that the spacing between Stacked Column Series groupings is weird. If you load up the SciCharts v.4.x Example and look at the "Stacked Column Side By Side" example, you can see this. Simply go from having everything checked to unchecking "China." Every single other bar (despite that China is no longer selected, freeing up more margin around the groups) is now narrower, even though there is more space to occupy.
In my own usage, I have noticed that the spacing gets VERY unusual, despite the fact that nothing can be turned on/off. There are data points for everything and there is still a large gap, despite setting Spacing to Relative and 0.01 and the DataPointWidth to 1.0.
I haven't checked the v.5.x examples yet, but I know that the issue is showing up with our usage of 5.2.1.x assemblies.
Is there any other way of expanding or overriding spacing between groups? It gets terribly sad when we are showing 9 groupings (18 bars; 2 data points for each group, so 9 categories or groupings) and we have more whitespace around the bar groupings than the width of the bars themselves.
Thank you!
First thing I would suggest is to update. The latest official release is SciChart WPF v5.4 and SciChart WPF v6 is in BETA now to be released soon.
We have fixed hundreds of bugs over the years and Stacked Column spacing has come up several times.
In the latest version, there are properties to control Stacked Column spacing. You will need to check
StackedColumnRenderableSeries.UseUniformWidth: where true forces all columns to have the same width
StackedColumnRenderableSeries.DataPointWidth: where 0.0 - 1.0 controls the gap width
Finally, Stacked Column series require that all DataSeries have the same number of points.

GtkRevealer glitches the text view drawing

During the development of my program I came across one drawing glitch that I was unable to solve. I am using GtkRevealer to show and hide a GtkInfoBar above another box holding a scrolled window with a GtkTextView (actually GtkSourceView) a lot like it is in gedit.
The whole thing is packed in a GtkPaned.
When I hide the infobar through the revealer, a black area in the text view appears and it disappears when a redrawing of the widget must occur (for instance when I click on the text view to place the cursor)
Additionally, this glitch does not appear if I enlarge the default resolution of the window, which for compatibility reasons is 640x480.
I understand that this may be hard to reproduce, but I am unaware who encountered the same problem. He maybe knows a workaround to this issue.
Also any idea is welcome.
I will draw exactly how the glitch looks on gedit (although it doesn't happen in gedit or it does but I cannot hit the correct resolution).
I tried to force a redrawing with gtk_widget_queue_draw() but nothing happens and it won't, because it has nothing to redraw.
I will try now to place the cursor automatically. It may work, but it is not functionally adequate.
EDIT:
Surprisingly it did not work. Grabbing the focus and placing the cursor
had no effect on the glitched visual behavior. I had to even make a new line
to fix it this time.
The fact that I have to resize the window with a value more than a specific point, may mean that the glitch may be due to alignment miscaulculations, but this doesn't explain why adding new line or a text mark in the gutter that colorizes the entire line also removes the black field.
Currently this bug has been encountered in another programs with a text view as well, but hasn't been reported as a bug yet.
Perhaps this has something to do with the fact that it is hard to reproduce.
I found that hiding the gtk text view with gtk_widget_hide() and then showing it with gtk_widget_show() works. The flicker of this visual glitch is not noticeable, perhaps due to GTK+ being event-based and waiting for the function to return to process changes.

Standard zoom view on different mobile devices

I'm new to CSS, jQuery etc. I have created a page and I need some guidance.
Currently I am using the metadata viewport tag with a fixed width (since my page is a fixed width at all times) and a initial-scale of 1.
This works very well once you have zoomed out - on all devices. The page renders at the correct scale, everything is great and you can zoom in and back out, and the page stays the same.
The problem is the INITIAL zoom level. When "Initial scale" is set to 1, it will zoom in way too much on phones, which is disturbing to first-time-viewers.
Is there a way to just tell whatever device that is viewing the page, that it should just zoom out as much as the viewport allows it? Like you would do with you fingers as it is right now. Just zoom all the way out and everything is fine... There must be some simple way to accomplish this? I've searched the net as much as I can, and all the solutions I have found either don't work or are really complicated, which seems unnecessary to me!
Thanks in advance
Turns out, the entire thing was because I had used a comma (,), instead of semicolon (;), to seperate my arguments in the metatag. This caused my first argument, which was width:810px, [next argument] to become invalid, cause the comma was attached to 810px. As soon as I replaced it with a semicolon, everything worked!

How to know why an animation stutters?

I have a few fairly simple animations (moving text around, moving ellipses etc.) and running in full screen (1920x1080 minus the task bar) the WPF Performance Suite reports a good framerate around 50 FPS throughout the animation. Dirty Rect Addition is somewhere around 300 rect/s, the SW frames are between 0 and 4 and the HW frames are between 3 and 5. Video memory usage is around 80 MB.
Problem is that the animations stutters every other half second. It is definitely not fluid :-(
My machine is a new Dell laptop XPS 15 with the GeForce GT 435 with 2GB memory. - The drivers are up to date. (The same behavior occurs on my netbook (in full screen) as well so I don't think it is hardware related.)
If I make the window smaller the stutter goes away.
The stutter occurs with the simplest of animations - even with just a couple of elements but adding more elements certainly makes it more noticeable.
How can I find out what causes this stutter?
When I think of it, I have not actually seen any WPF animations which run smoothly in full screen. Is this even possible?
Have you tried to set a lower "max frame rate" to the animation?
<Storyboard Timeline.DesiredFrameRate="10">
<!-- ....blah blah blah -->
</Storyboard>
If your animation is causing massive recalculation of child or parent elements, changing the DesiredFrameRate will have a cascading effect on the number of calculations made by the system.
Also, check out the "Remarks" section of this link. It explains why/when you should use it.
If setting a lower frame rate fixes your stuttering, then you need to consider simplifying your XAML to limit the amount of recalculation needed at every frame of your animation (limiting the number of child or parent objects resized - or affected in any way - by every frames/changes made by the animation.
You might want to also check out the "WPF Performance Suite". It is an awesome set of tools to determine what exactly is going on in your WPF app, seeing which parts of your window are being repainted and when, and the CPU usage of each of your XAML elements!
Hope this helps!
Patrick,
I have no answers. All I can do is provide some solidarity. I'm trying to animate an ItemsControl. The concept is pretty simple, really. I've got a ListView and in the ListView I have a GridView. I want the items in the GridView to to smoothly go from one row to another row as the underlying list is sorted so that, for example, a sorted list will stay sorted as the values in the list change.
I've noticed this: animation on moderately complex controls is a CPU hog. The stuttering I'm pretty sure is simply related to the CPU being maxed out (I noticed you didn't provide the CPU graph on your dump above). Keep the CPU around 50% and the animation appears smooth, above 75% and you get these stutters.
Still working on the problem, but I think it goes deeper than my code.
Don
I had a similar issue where it was stuttering, nothing really major it just looked like little stutters here and there while I ran the program. On a hunch, I shut down Google Chrome while it was running and that fixed it,the scrolling became completely smooth...
So my advice would be if you have any internet browsers open check to see if closing them out fixes the problem.

Resources