Electrons Offset from Orbital

[emily-phet]

The electron particles looking offset from the orbital diagram.

Sim Info: Name: Build an Atom URL: http://www.colorado.edu/physics/phet/dev/html/build-an-atom/1.1.0-rc.2/build-an-atom_en.html Version 1.1.0-rc.1 Feature missing: touch, webgl, fullscreen Flags: msPointerEnabled User Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.050727; .NET CLR 3.0.30729; Tablet PC 2.0; ASU2JS) Window: 2277x1122 Pixel Ratio: 1/1

[jbphet]

So far I am unable to duplicate this one, and have never seen it before. Can I get more information about it, specifically:

• What was the hardware?
• Did it start out like this, or did it work normally for a while and then the electron positions shifted?
• Was there anything else unusual that happened?

[emily-phet]

I saw this issue on the Windows 8 laptop, the touch-screen Asus. I'll bring it into status tomorrow so folks can check it out. The issue was present the whole time I was using the sim, in the atom models on the first and second screens. Nothing else seemed odd. I noticed it at first because i thought that the particles were not 'clicking' into place, i thought they were either being left where I let go of them (so just kind of floating), or that the sim was freezing up, and they were stuck in place. I quickly realized that they were 'clicking' into place, it was just slightly off from the correct location on the model orbital.

[orejolaphet]

This issue is still present on Windows 8 Laptop with IE10. Tested on the latest release candidate, 1.1.0-rc.4.

[samreid]

I did not see this problem on my Win8/IE10 with:

Troubleshooting information (do not edit):

Name: Build an Atom

URL: http://www.colorado.edu/physics/phet/dev/html/build-an-atom/1.1.0-rc.2/build-an-atom_en.html

Version: 1.1.0-rc.1

Features missing: touch, webgl, fullscreen

Flags: msPointerEnabled

User Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)

Window: 1231x658

Pixel Ratio: 1/1

WebGL: unsupported

[jonathanolson]

It's specific to SVG with CSS transforms (SVG without transforms, or with Canvas, results in proper positioning)

[jonathanolson]

Sample information:

Firefox:
<svg width="26" height="26" stroke-miterlimit="10" style="position: absolute; left: 0px; top: 0px; clip: rect(0px, 1252px, 339px, 0px); z-index: 2; transform: matrix(0.619237, 0, 0, 0.619237, 404.437, 274.198); transform-origin: left top 0px;">

    <defs> … </defs>
    <g transform="translate(13.00000000000000000000,13)" style="display: inherit;" opacity="1">
        <g style="display: inherit;" opacity="1">
            <g style="display: inherit;" opacity="1">
                <circle r="10" style="fill: url(#fill116);stroke: none;"></circle>
            </g>
        </g>
    </g>

</svg>

IE10:
<svg style="left: 0px; top: 0px; position: absolute; z-index: 2; clip: rect(0px, 2277px, 623px, 0px); pointer-events: none; transform: matrix(1.13801, 0, 0, 1.13801, 731.321, 503.91); transform-origin: left top;" stroke-miterlimit="10" width="26" height="26">
<defs xmlns="http://www.w3.org/2000/svg"><radialGradient id="fill116" gradientUnits="userSpaceOnUse" cx="-4" cy="-4" r="16" fx="-4" fy="-4"><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 1;" offset="0" /><stop style="stop-color: rgb(255, 0, 0); stop-opacity: 1;" offset="1" /></radialGradient></defs>
<g xmlns="http://www.w3.org/2000/svg" style="display: inherit;" opacity="1" transform="translate(13 13)">
  <g style="display: inherit;" opacity="1">
    <g style="display: inherit;" opacity="1">
      <circle style="fill: url(#fill116); stroke: none;" r="10" /></g></g></g>

[jonathanolson]

When y-constrained (wide but short window), the offset is to the right. When x-constrained (tall but thin window), the offset is down.

[jonathanolson]

Seems that the X offset magnitude is tied specifically to how far from the left of the window it is, and similarly for the Y offset with distance from the top.

[jonathanolson]

x+800: (0.526077,0,0,0.526077,1611.77, 232.947) x-800: (0.526077,0,0,0.526077,11.7696, 232.947)

Our CSS transforms seem to be accurate and not causing the problem.

[jonathanolson]

Broken version info: MSIE Version: 10.0.9200.16721 Update Versions: 10.0.10 (KB2879017)

Windows 8 (64bit, x86) Intel HD Graphics 3000 Intel 7 Series/C216 Chipset Full touch support (10 touch points)

[jonathanolson]

Working on identical MSIE version with:

Windows 8 Enterprise (64-bit, x86) NVIDIA Quadro FX 880M Intel 5 Series/3400 Series Chipset No touch support

[jonathanolson]

Seems potentially graphics-driver specific? Very hard to tell.

[jbphet]

This seems to only be an issue on this hardware. Other hardware, such as @samreid 's machine running the same OS, does not have the problem. @jonathanolson says that it is specific to CSS transforms on this device, so we could potentially detect the hardware through the user agent string and turn off these transforms. We discussed with @ariel-phet and decided to not implement this workaround for now. If we get reports from users once this has been published, we will revisit this issue and may decide to address.

[jbphet]

This sim has been published for 2+ years and we haven't heard any reports of this. Also, it seems like very few of our users are on Windows Surface devices. I think it's safe to close this.