[IE11] Artifacts appear when dragging sliders

[brroberts1231]

For phetsims/tasks#702 Test device: Bates

Operating System: Win 7

Browser: IE 11

Problem description: Artifacts appear when you drag either of the sliders on the lab screen from the left to the right. Only happens when 'Ideal' is checked.

Steps to reproduce: Check the Ideal checkbox, drag either slider all the way to the left, then drag it right.

Severity: low

Screenshots:

Troubleshooting information (do not edit):

Name: ‪Plinko Probability‬

URL: http://www.colorado.edu/physics/phet/dev/html/plinko-probability/1.0.0-rc.1/plinko-probability_en.html

Version: 1.0.0-rc.1 2016-09-16 19:30:26 UTC

Features missing: touch, fullscreen

Flags: pointerEnabled, msPointerEnabled

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

Language: en-US

Window: 1366x674

Pixel Ratio: 1/1

WebGL: WebGL 0.94

GLSL: WebGL GLSL ES 0.94

Vendor: Microsoft (Internet Explorer)

Vertex: attribs: 16 varying: 15 uniform: 512

Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)

Max viewport: 16384x16384

OES_texture_float: true

Dependencies JSON: {"assert":{"sha":"7d27130a","branch":"HEAD"},"axon":{"sha":"e0192608","branch":"HEAD"},"babel":{"sha":"c041de05","branch":"master"},"brand":{"sha":"f0b1f7da","branch":"HEAD"},"chipper":{"sha":"07058555","branch":"HEAD"},"dot":{"sha":"39436598","branch":"HEAD"},"joist":{"sha":"b513b5ee","branch":"HEAD"},"kite":{"sha":"73302899","branch":"HEAD"},"phet-core":{"sha":"c48bf320","branch":"HEAD"},"phetcommon":{"sha":"83ea84c8","branch":"HEAD"},"plinko-probability":{"sha":"3a105d26","branch":"HEAD"},"query-string-machine":{"sha":"05231e54","branch":"HEAD"},"scenery":{"sha":"e78ee413","branch":"HEAD"},"scenery-phet":{"sha":"f0fc9ae8","branch":"HEAD"},"sherpa":{"sha":"bcc28cd6","branch":"HEAD"},"sun":{"sha":"f2bd9d60","branch":"HEAD"},"tandem":{"sha":"d369b847","branch":"HEAD"},"vibe":{"sha":"b422db9c","branch":"HEAD"}}

[BryceAG]

reproduced on windows 8 IE11, although it doesn't require ideal to be reset. Also the lines disappear when the cursor comes off the slider.

[pixelzoom]

@phet-steele: Does this appear with other sims that use HSlider, either in master or published? And does the issue manifest only at some browser window sizes, or all sizes?

[phet-steele]

Does this appear with other sims that use HSlider, either in master or published?

I don't often see it, but is this the same issue (resolved)? https://github.com/phetsims/under-pressure/issues/142

[pixelzoom]

I inspected the commit for phetsims/under-pressure#142, and I have no idea how that commit fixed this issue. A require statement was deleted to fix a lint error, and maxWidth setting was deleted for an AccordionBox - neither of those should have affected an HSlider.

[pixelzoom]

In phetsims/under-pressure#142, the HSlider is inside of an AccordionBox. I suspect that removing the maxWidth setting for the AccordionBox coincidentally fixed the issue. But I have no idea why that would be the case. And in Plinko, there is no AccordionBox involved, and no use of maxWidth for the HSliders or Panel that contains them.

[pixelzoom]

@phet-steele My other question in https://github.com/phetsims/plinko-probability/issues/93#issuecomment-248417323 was:

And does the issue manifest only at some browser window sizes, or all sizes?

[pixelzoom]

In https://github.com/phetsims/under-pressure/issues/142#issuecomment-248451321, @aadish said:

I don't have a sound reasoning behind it but think that in IE setting up minWidth and maxWidth messes up things around

So the hypothesis is that using scenery's maxWidth features cause artifacts with HSlider in IE. @jonathanolson is there any reason to suspect that this is the case?

[pixelzoom]

@ariel-phet I've labeled this as high priority, and @jonathanolson's input is needed.

[jessegreenberg]

I just saw this in forces-and-motion-basics on Windows 10 Chrome 53.0.2785.116, but for a different draggable node:

Now I am having a very hard time reproducing this. The window for the above image happened to be smaller because the developer console was open. When I increased the window size, the issue went away, but after reducing the window size again I am still unable to reproduce the above image. On my Windows 10 machine I also cannot reproduce in IE11 or Firefox.

EDIT: The draggable node in the above image does not use maxWidth, but it has a child label that does.

EDIT2: I randomly found that I can reproduce this with consistency on Chrome with window size 951x768. I haven't been able to get this to happen for other random window sizes, smaller or larger. The traces are still there after removing maxWidth on the node's label.

[jonathanolson]

maxWidth itself is probably just causing things to be in slightly different positions, or with different sizes. Usually this crops up when rendering SVG and the browser doesn't quite clear enough of the existing pixels to properly repaint (by mis-estimating the size of what is drawn).

Before, adding something that tricks the browser into clearing and redrawing a slightly larger area has worked. I'll experiment a bit to see if that can fix this particular issue (and the related Chrome one).

[jonathanolson]

A brief test (https://github.com/phetsims/sun/commit/f411f885d32adef5fe82b98932901517630d3c1f, adding a transparent unpickable rectangle on the slider) seems to prevent the artifacts in my testing.

@pixelzoom, thoughts on a more long-term solution?

[pixelzoom]

@jonathanolson said:

adding a transparent unpickable rectangle on the slider) seems to prevent the artifacts in my testing.

Do you mean a rectangle on the entire slider or on the slider's thumb? Presumably this is something that I'd need to do in common code, which I don't think is a good idea. So I don't think this is a viable workaround.

@pixelzoom, thoughts on a more long-term solution?

Well, we certainly can't be adding transparent rectangles over everything that moves. And since I have no understanding of scenery internals, I can't suggest a solution.

I do know that we are now very dependent on maxWidth for i18n, and if that's causing this problem, then we need to figure out how to address this in scenery.

[pixelzoom]

@phet-steele Awaiting your reply to https://github.com/phetsims/plinko-probability/issues/93#issuecomment-248430221.

[pixelzoom]

Labeling for developer meeting, since (as demonstrated in https://github.com/phetsims/plinko-probability/issues/93#issuecomment-248482366) this problem is not specific to this sim.

[pixelzoom]

@ariel-phet Please indicate whether this is an issue that needs to be addressed for the 1.0.0 release.

[ariel-phet]

@pixelzoom - I can reproduce on IE, but only at certain window sizes.

This issue does not need to be addressed for the 1.0.0 release

@pixelzoom it seems this issue for dev meeting should be moved to another repo? Scenery or sun? (wherever maxWidth lives) and marked for dev meeting?

Edit: @phet-steele echoed my comments above

[pixelzoom]

@ariel-phet said:

it seems this issue for dev meeting should be moved to another repo?

I'm going to defer creating the general issue until we discuss at developer meeting, since that may shed additional light on the nature of the general issue.

[ariel-phet]

@pixelzoom sounds good

[samreid]

This is a browser bug, the best long term solution will be to create a minimal isolated reproducible test case, record video and report to the browser vendors. We can add a workaround for the short term as well (adding transparent rectangles where necessary has worked previously).

EDIT: Here is the parent issue which identified this problem originally. https://github.com/phetsims/scenery/issues/80

[pixelzoom]

Reopened and tracking in phetsims/scenery#80.

[pixelzoom]

This issue will not be addressed for 1.0.0 release, marking as deferred.