Stuttering window in chrome

[MarcusZ]

Hi,
i've got an optical issue with chrome.
First things first, i'm using today's nightly build "v8.3p_2012-11-22/Pro Deployment" and HTML DOCTYPE 5.
I've got a simple auto centered and mondial window over a vLayout. If i'm altering the zoom of the browser,
the window starts to stutter and the layout iterates through the disabling and enabling of it's vertical and horizontal scrollbars.
Here the code example, in which this behaviour occurs

isc.VLayout.create({
	height: "100%",
	width: "100%",
	overflow: "auto",
	members: [
		isc.Canvas.create({
			height: "100%",
			width: "100%",
			contents: "Test"
			})
		]
	});
isc.Window.create({
	title: "stutter test",
	width: 400,
	height: 400,
	mondial: true,
	autoCenter: true,
	items: [
		isc.Canvas.create({
			height: "100%",
			width: "100%",
			contents: "Test"
			})
		]
	});

Regards Marcus

[Isomorphic]

This is expected to happen when zoomed in Chrome - unfortunately, when zoomed, the browser feeds us bad information about sizes, positions and coordinates. There is not currently a way to work around this, but we may be able to support it in the future.

[MarcusZ]

Hi,
i've got some new informations about this bug. It did also occur in the IE9.
And changing the zoom of the browser doesn't seem to be the only cause of the problem.
The stuttering appears, for certain display resolutions immediately.

The problem is that, if this bug occurs our application is going to become unusable.
We would appreciate it if you could fix this bug asap

[Isomorphic]

IE9 has the same issues with zoom (actually they are worse).

We need a way to reproduce the stutter problem in order to fix it. Your test code on its own doesn't reproduce it - if you think it's resolution-dependent, we'll need to know the exact resolution where it occurs, and what OS you're on at a minimum.

Also, be sure to test with no CSS other than the skin that comes in the SDK.

[MarcusZ]

Hi,
it seems that the stuttering occurs for resolutions, which have a width-to-height ratio of 16:10.
Sadly i could not reproduce it with any resolution, so i tried another approach. I've told you in my first post that the scrollbars of the different components seems to iterate through
the disabling and enabling of their scrollbars. I could reproduce this behaviour with a listgrid, which does work for each resolution in IE8.
You can see the example below. I'm using the current nightly build "v8.3p_2012-11-30/Pro Deployment" and html doctype 5.

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
	overflow: "auto",
    fields:[
        {name:"countryCode", title:"Code"},
        {name:"countryName", title:"Country"},
        {name:"independence", title:"Nationhood", type:"date"},
        {name:"population", title:"Population", type:"integer"},
        {name:"gdp", title:"GDP", type:"float"}
    ],
    data: countryData = [

{
    continent:"North America",
    countryName:"United States",
    countryCode:"US",
    area:9631420,
    population:298444215,
    gdp:12360.0,
    independence:new Date(1776,6,4),
    government:"federal republic",
    government_desc:2,
    capital:"Washington, DC",
    member_g8:true,
    article:"http://en.wikipedia.org/wiki/United_states"
},
{
    continent:"Asia",
    countryName:"China",
    countryCode:"CH",
    area:9596960,
    population:1313973713,
    gdp:8859.0,
    government:"Communist state",
    government_desc:0,
    capital:"Beijing",
    member_g8:false,
    article:"http://en.wikipedia.org/wiki/China"
},
{
    continent:"Asia",
    countryName:"Japan",
    countryCode:"JA",
    area:377835,
    population:127463611,
    gdp:4018.0,
    government:"constitutional monarchy with parliamentary government",
    government_desc:1,
    capital:"Tokyo",
    member_g8:true,
    article:"http://en.wikipedia.org/wiki/Japan"
},
{
    continent:"Asia",
    countryName:"India",
    countryCode:"IN",
    area:3287590,
    population:1095351995,
    gdp:3611.0,
    independence:new Date(1947,7,15),
    government:"federal republic",
    government_desc:2,
    capital:"New Delhi",
    member_g8:false,
    article:"http://en.wikipedia.org/wiki/India"
},
{
    continent:"Europe",
    countryName:"Germany",
    countryCode:"GM",
    area:357021,
    population:82422299,
    gdp:2504.0,
    independence:new Date(1871,0,18),
    government:"federal republic",
    government_desc:2,
    capital:"Berlin",
    member_g8:true,
    article:"http://en.wikipedia.org/wiki/Germany"
},
{
    continent:"Europe",
    countryName:"United Kingdom",
    countryCode:"UK",
    area:244820,
    population:60609153,
    gdp:1830.0,
    independence:new Date(1801,0,1), 
    government:"constitutional monarchy",
    government_desc:1,
    capital:"London",
    member_g8:true,
    article:"http://en.wikipedia.org/wiki/United_kingdom"
},
{
    continent:"Europe",
    countryName:"France",
    countryCode:"FR",
    area:547030,
    population:60876136,
    gdp:1816.0,
    government:"republic",
    government_desc:5,
    capital:"Paris",
    member_g8:true,
    article:"http://en.wikipedia.org/wiki/France"
},
{
    continent:"Europe",
    countryName:"Italy",
    countryCode:"IT",
    area:301230,
    population:58133509,
    gdp:1698.0,
    independence:new Date(1861,2,17),
    government:"republic",
    government_desc:5,
    capital:"Rome",
    member_g8:true,
    article:"http://en.wikipedia.org/wiki/Italy"
},
{
    continent:"Asia",
    countryName:"Russia",
    countryCode:"RS",
    area:17075200,
    population:142893540,
    gdp:1589.0,
    independence:new Date(1991,7,24),
    government:"federation",
    government_desc:3,
    capital:"Moscow",
    member_g8:true,
    article:"http://en.wikipedia.org/wiki/Russia"
},
{
    continent:"South America",
    countryName:"Brazil",
    countryCode:"BR",
    area:8511965,
    population:188078227,
    gdp:1556.0,
    independence:new Date(1822,8,7),
    government:"federative republic",
    government_desc:3,
    capital:"Brasilia",
    member_g8:false,
    article:"http://en.wikipedia.org/wiki/Brazil"
},
{
    continent:"North America",
    countryName:"Canada",
    countryCode:"CA",
    area:9984670,
    population:33098932,
    gdp:1114.0,
    independence:new Date(1867,6,1),
    government:"constitutional monarchy with parliamentary democracy and federation",
    government_desc:1,
    capital:"Ottawa",
    member_g8:true,
    article:"http://en.wikipedia.org/wiki/Canada"
},
{
    continent:"North America",
    countryName:"Mexico",
    countryCode:"MX",
    area:1972550,
    population:107449525,
    gdp:1067.0,
    independence:new Date(1810,8,16),
    government:"federal republic",
    government_desc:2,
    capital:"Mexico (Distrito Federal)",
    member_g8:false,
    article:"http://en.wikipedia.org/wiki/Mexico"
},
{
    continent:"Europe",
    countryName:"Spain",
    countryCode:"SP",
    area:504782,
    population:40397842,
    gdp:1029.0,
    independence:new Date(1492,0,1),
    government:"parliamentary monarchy",
    government_desc:4,
    capital:"Madrid",
    member_g8:false,
    article:"http://en.wikipedia.org/wiki/Spain"
},
{
    continent:"Asia",
    countryName:"South Korea",
    countryCode:"KS",
    area:98480,
    population:48846823,
    gdp:965.3,
    independence:new Date(1945,7,15),
    government:"republic",
    government_desc:5,
    capital:"Seoul",
    member_g8:false,
    article:"http://en.wikipedia.org/wiki/South_korea"
},
{
    continent:"Asia",
    countryName:"Indonesia",
    countryCode:"ID",
    area:1919440,
    population:245452739,
    gdp:865.6,
    independence:new Date(1945,7,17),
    government:"republic",
    government_desc:5,
    capital:"Jakarta",
    member_g8:false,
    article:"http://en.wikipedia.org/wiki/Indonesia"
}

]

})

[Isomorphic]

We're not clear on how to reproduce an issue. Does this require zooming? A browser with 16:10 size ratio? That's not sufficient information as the width of browser chrome differs by OS and theme and other settings.

[MarcusZ]

Hi,
most of the customers, which have reported the stuttering of the components, are using monitors with a resolution of a ratio of 16:10. What means that they are using a display resolutions like "1680x1050".
Unfortunately we could not reproduce it. They are using winXP or win7 as OS
My example-code doesn't reproduce the stuttering, it reproduce an endless enabling and disabling of the scrollbars of a component, which could be cause of the stuttering.
To reproduce this issue it is not necessary to change the zoom.

[Isomorphic]

We see the stuttering issue with that grid in IE8, however, it's caused by the setting "overflow:auto", which is senseless because the ListGrid as a whole should never scroll; its body does.

So this is basically bad usage, and unlikely to be related to the "stuttering" issue that you can't reproduce.

[MarcusZ]

You were right, setting the overflow to "auto" caused the problem of the listgrid in the IE8.
Thank you.

[MarcusZ]

Hi,
i know it's been a while, but we finally found a way to reproduce the stuttering.
First things first, we're using html doctype 5 and the smartclient version "v8.3p_2013-01-13/Pro Deployment".
We could only reproduce it for the IE9 with a zoom of 75%. The weird thing is that the stuttering isn't depending of the display resolution, as we thought at the beginning.
There is only one further requirement, which is mandatory to reproduce the issue.
The tabs of the IE has to be shown in a seperate line.
You'll see the code in which the stuttering occurs below. If you execute the code, the stuttering will not occur immediately. You need to open the selectItem of the form twice to see the stuttering

isc.HLayout.create(
		{
		"width":"100%",
		"height":"100%",
		"leaveScrollbarGap":false,
		"members":
		[ isc.VLayout.create(
		{
		 "width":"100%",
		 "height":"100%",
		 "leaveScrollbarGap":false,
		 "members":
		 [ 
		  isc.ListGrid.create(
		   {
			"height":"50%",
			"selectionProperty":"isSelected",
		   }
		   ),
		  isc.HLayout.create(
		   {
			"height":"100%",
			"autoDraw":true,
			"leaveScrollbarGap":false,
			"members":
			[ isc.VLayout.create(
			  {
			   "width":"100%",
			   "height":"100%",
			   "leaveScrollbarGap":false,
			   "members":
			   [ isc.DynamicForm.create(
				 {
				  "width":"100%",
				  "height":"100%",
				  "autoFocus":true,
				  "selectOnFocus":true,
				  "fields":
				  [
				   {
					"name":"selectItem",
					"title":"Field 1",
					"type":"select",
					"valueMap":
					{
					 1:"New Value 1",
					 2:"New Value 2",
					 3:"New Value 3",
					 4:"New Value 4",
					 5:"New Value 5",
					 6:"New Value 6",
					}
				   }
				  ],
				  "values":
				  {
				   "selectItem":1,
				  }
				 }
				 )
			   ]
			  }
			  )
			]
		   }
		   )
		 ]
		}
		)
		]
		}
		);

[Isomorphic]

Great that you narrowed it down and you now know it's only when zoomed.

As previously mentioned, it is not currently possible to support zoomed mode in Chrome without lots of issues like this.

[vnathank]

Hi,
Iam using SmartGWT version pro 3.1(24th May 2013) and
and chrome Version 28.0.1500.95 m.
This issue is reproducing not only when we are zooming, when browser re sizing also.
Could you please inform me whether this issue is already fixed or may be in future builds it will be available.

Thanks in advance.

[Isomorphic]

We have never reproduced this issue without zooming enabled.

[vnathank]

Model window is Stuttering.

Hi,

Issue : Model window is Stuttering.

I have checked with Smart Gwt-3.1p(Dec-17-2013) and also with Smart Gwt-4.0 Full Featured Trail Version.
After browser zoom, some of the model windows are
Stuttering(keep on shaking with scroll bars) window in "Google Chrome" and "Fire Fox".

Please let us know in which version of the Smart Gwt is supporting browser zooming.

Please find the screen shot and sample application code(SystemSettings.java).


Thanks,

[Isomorphic]

See post #2 is this thread. Browser zoom is not currently supportable (too many browser bugs).