Graphics artifacts in Safari 16

[Nancy-Salpepi]

Recent Sim Tests with Artifacts Energy Skate Park - Dec 7, 2022 Atomic Interactions - Dec 7, 2022 Mean: Share and Balance - Dec 12, 2022 Normal Modes (close bottom panel) - Dec 12, 2022 John Travoltage (in preferences dialog when e- are on body) - Dec 12, 2022 Least Squares Regression (in panel with custom)- Dec 12, 2022 Masses and Springs (in panel, in springs) - Dec 12, 2022 Geometric Optics (light scene) - Dec 12, 2022 Friction (in the thermometer) - Dec 22, 2022 Greenhouse (in the energy flux meter) - Jan 6, 2023 Beer's Law Lab/Concentration (detector probe) - Jan 30, 2023 Calculus Grapher 3/20/2023

Test device MacBook Air (m1 chip) and iPad 9th generation

Operating System macOS 13.0 and iPadOS 16

Browser safari 16

Problem description For https://github.com/phetsims/qa/issues/847, in the Light scene, artifacts appear on the screen when the light is moved up and down. I am also seeing this in the published version. I think it is a result of the newest macOS + safari versions because no artifacts occur when I test with my desktop (macOS 10.15.7 + safari 15.6.1). Plus, I also saw artifacts while testing https://github.com/phetsims/qa/issues/848.

Steps to reproduce

1. Select the Light scene on the Lens screen.
2. Move the light up and down so that the rays are entirely off the screen and then back on the screen.
3. Repeat step 2 until you see lines appear towards the top of the screen.

Visuals

https://user-images.githubusercontent.com/87318828/199805807-3d65a9cb-34ea-4c1d-ad76-21eb65cb54f6.mp4

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Geometric Optics: Basics‬ URL: https://phet-dev.colorado.edu/html/geometric-optics-basics/1.2.0-dev.3/phet/geometric-optics-basics_all_phet.html Version: 1.2.0-dev.3 2022-10-31 21:00:48 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Language: en-US Window: 1813x1056 Pixel Ratio: 1.3333333730697632/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 31 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[pixelzoom]

I don't have macOS 13 installed yet, so I can't reproduce this. But nothing about this problem sounds sim-specific. It's almost certainly a general problem that involves scenery.

Assigning to @jonathanolson for investigation, and @kathy-phet for prioritization.

Since this likely affects all sims, labeling as blocks-publication until someone decides otherwise.

[arouinfar]

Good find @Nancy-Salpepi. Did you notice any other artifacts on Safari? Was this something you noticed often? Can you comment on the severity?

I agree with @pixelzoom, this looks like a scenery issue. It's unclear what sort of impact this may have across sims, so I think it's worth some investigation from @jonathanolson.

It looks like a similar issue was found in Mean: Share & Balance and was patched. Could that be applicable here? https://github.com/phetsims/mean-share-and-balance/issues/122

[pixelzoom]

The workaround in MSaB is brute force, and really ugly. It's putting an expanded rectangle around the things that are leaving artifacts, to make the "redraw" area larger. That's not generally desirable or scalable, and we're in bad shape if that's what we need to do to get clean rendering on Safari. So I'm definitely not doing that until the general issue has gotten some attention.

[pixelzoom]

QA has completed dev test https://github.com/phetsims/qa/issues/847. Further progress is blocked until this issue is addressed. If we wait more than a few days, we'll need to do another dev test, because master will have diverged.

[Nancy-Salpepi]

@arouinfar it took a while for me to notice the artifacts on the projector screen, but once I did, it was very obvious to me.

I have definitely seen worse cases with safari--https://github.com/phetsims/gravity-and-orbits/issues/435

[jonathanolson]

I'll look if there's a way to force Safari SVG to force-repaint in a more global way. I don't yet have macOS 13, but I can upgrade to be able to work on this.

[marlitas]

It's putting an expanded rectangle around the things that are leaving artifacts, to make the "redraw" area larger.

Wanted to correct this comment. What was actually committed and pushed was a different solution. We identified the guilty path causing the artifacts and set it to renderer: canvas. Not suggesting that this is a scalable option either. Creating an anti-artifact rectangle actually did not work at all in our case either and renderer: canvas was the fallback option.

[marlitas]

@samreid and I found a hacky way to fix this and wanted to post it here in case it would be of any help to @jonathanolson.

We co-opted the PointerAreas overlay to cover the entire sim screen, and this seemed to trick Safari enough to remove artifacts. You can try it out with this patch:

```diff Index: js/overlays/PointerAreaOverlay.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/overlays/PointerAreaOverlay.ts b/js/overlays/PointerAreaOverlay.ts --- a/js/overlays/PointerAreaOverlay.ts (revision 4bd140960a2da61f10286d9182dd251b9ea7e9c3) +++ b/js/overlays/PointerAreaOverlay.ts (date 1668011533988) @@ -16,24 +16,7 @@ } public addShapes(): void { - new Trail( this.rootNode ).eachTrailUnder( trail => { - const node = trail.lastNode(); - if ( !node.isVisible() ) { - // skip this subtree if the node is invisible - return true; - } - if ( ( node.mouseArea || node.touchArea ) && trail.isVisible() ) { - const transform = trail.getTransform(); - - if ( node.mouseArea ) { - this.addShape( transform.transformShape( node.mouseArea instanceof Bounds2 ? Shape.bounds( node.mouseArea ) : node.mouseArea ), 'rgba(0,0,255,0.8)', true ); - } - if ( node.touchArea ) { - this.addShape( transform.transformShape( node.touchArea instanceof Bounds2 ? Shape.bounds( node.touchArea ) : node.touchArea ), 'rgba(255,0,0,0.8)', false ); - } - } - return false; - } ); + this.addShape( Shape.bounds( new Bounds2( 0, 0, 2000, 2000 ) ), 'rgba(0,0,255,0.8)', true ); } } ```

We confirmed this is fixed on MacOS 13 and Safari 16.1

[kathy-phet]

@pixelzoom - Met with JO and he will work on baking on a workaround in scenery for Safari, so that the work around isn't sim specific. Seems like Safari is not updating SVG drawing quite right.

We will want to test performance on Safari after the fix.

@jonathanolson - Is this something where a bug report to Safari makes sense?? So they may fix it in a future version.

[kathy-phet]

@jonathanolson - Consider for combining with ?allowlinks maintenance release as you do this fix.

[jonathanolson]

@samreid @marlitas the overlay style approach seems to help this issue, but does NOT seem to help the GAO issue. Did you see your solution helping both?

I'm getting this line visual, while paused, while I'm force-changing a rectangle in front (that's very visual).

I'll see if I can stuff the rectangle into the actual SVG elements that are buggy.

[jonathanolson]

Patch for overlay with flashing color:

```diff Index: js/overlays/SafariWorkaroundOverlay.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/overlays/SafariWorkaroundOverlay.ts b/js/overlays/SafariWorkaroundOverlay.ts new file mode 100644 --- /dev/null (date 1668220008486) +++ b/js/overlays/SafariWorkaroundOverlay.ts (date 1668220008486) @@ -0,0 +1,61 @@ +// Copyright 2022, University of Colorado Boulder + +/** + * Tricks Safari into forcing SVG rendering, see https://github.com/phetsims/scenery/issues/1503 + * + * @author Jonathan Olson + */ + +import dotRandom from '../../../dot/js/dotRandom.js'; +import { Display, scenery, svgns, TOverlay } from '../imports.js'; + +export default class SafariWorkaroundOverlay implements TOverlay { + + public domElement: SVGElement; + private rect: SVGPathElement; + private display: Display; + + public constructor( display: Display ) { + + this.display = display; + + const svg = document.createElementNS( svgns, 'svg' ); + this.domElement = svg; + svg.style.position = 'absolute'; + svg.setAttribute( 'class', 'safari-workaround' ); + svg.style.top = '0'; + svg.style.left = '0'; + // @ts-ignore + svg.style[ 'pointer-events' ] = 'none'; + + display.sizeProperty.link( dimension => { + svg.setAttribute( 'width', '' + dimension.width ); + svg.setAttribute( 'height', '' + dimension.height ); + svg.style.clip = `rect(0px,${dimension.width}px,${dimension.height}px,0px)`; + } ); + + this.rect = document.createElementNS( svgns, 'rect' ); + + svg.appendChild( this.rect ); + + this.update(); + } + + public update(): void { + + + const random = dotRandom.nextDouble(); + + this.rect.setAttribute( 'x', '' + random ); + this.rect.setAttribute( 'y', '' + random ); + this.rect.setAttribute( 'style', `fill: rgba(255,200,100,${random * 0.1}); stroke: none;` ); + if ( this.display.width ) { + this.rect.setAttribute( 'width', '' + ( this.display.width - random * 2 ) ); + } + if ( this.display.height ) { + this.rect.setAttribute( 'height', '' + ( this.display.height - random * 2 ) ); + } + } +} + +scenery.register( 'SafariWorkaroundOverlay', SafariWorkaroundOverlay ); Index: js/display/Display.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/display/Display.ts b/js/display/Display.ts --- a/js/display/Display.ts (revision f88a677207ed72d4dfbfd95f68e1a17652b49db3) +++ b/js/display/Display.ts (date 1668219829256) @@ -68,6 +68,7 @@ import UtteranceQueue from '../../../utterance-queue/js/UtteranceQueue.js'; import { BackboneDrawable, Block, CanvasBlock, CanvasNodeBoundsOverlay, ChangeInterval, Color, DOMBlock, DOMDrawable, Drawable, Features, FittedBlockBoundsOverlay, FocusManager, FullScreen, globalKeyStateTracker, HighlightOverlay, HitAreaOverlay, Input, InputOptions, Instance, KeyboardUtils, Node, PDOMInstance, PDOMSiblingStyle, PDOMTree, PDOMUtils, PointerAreaOverlay, PointerOverlay, Renderer, scenery, scenerySerialize, SelfDrawable, TInputListener, TOverlay, Trail, Utils, WebGLBlock } from '../imports.js'; import TEmitter from '../../../axon/js/TEmitter.js'; +import SafariWorkaroundOverlay from '../overlays/SafariWorkaroundOverlay.js'; export type DisplayOptions = { // Initial (or override) display width @@ -79,6 +80,10 @@ // Applies CSS styles to the root DOM element that make it amenable to interactive content allowCSSHacks?: boolean; + // Whether we allow the display to put a rectangle in front of everything that subtly shifts every frame, in order to + // force repaints for https://github.com/phetsims/scenery/issues/1503. + allowSafariRedrawWorkaround?: boolean; + // Usually anything displayed outside our dom element is hidden with CSS overflow. allowSceneOverflow?: boolean; @@ -320,6 +325,8 @@ // {boolean} - Applies CSS styles to the root DOM element that make it amenable to interactive content allowCSSHacks: true, + allowSafariRedrawWorkaround: true, + // {boolean} - Usually anything displayed outside of our dom element is hidden with CSS overflow allowSceneOverflow: false, @@ -458,6 +465,10 @@ featureSpecificAnnouncingControlPropertyName: 'descriptionCanAnnounceProperty' } ); + if ( platform.safari && options.allowSafariRedrawWorkaround ) { + this.addOverlay( new SafariWorkaroundOverlay( this ) ); + } + this.focusManager = new FocusManager(); // Features that require the HighlightOverlay ```

[jonathanolson]

Forcing a repaint IN every single SVG element still doesn't help:

```diff Index: js/overlays/SafariWorkaroundOverlay.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/overlays/SafariWorkaroundOverlay.ts b/js/overlays/SafariWorkaroundOverlay.ts new file mode 100644 --- /dev/null (date 1668220008486) +++ b/js/overlays/SafariWorkaroundOverlay.ts (date 1668220008486) @@ -0,0 +1,61 @@ +// Copyright 2022, University of Colorado Boulder + +/** + * Tricks Safari into forcing SVG rendering, see https://github.com/phetsims/scenery/issues/1503 + * + * @author Jonathan Olson + */ + +import dotRandom from '../../../dot/js/dotRandom.js'; +import { Display, scenery, svgns, TOverlay } from '../imports.js'; + +export default class SafariWorkaroundOverlay implements TOverlay { + + public domElement: SVGElement; + private rect: SVGPathElement; + private display: Display; + + public constructor( display: Display ) { + + this.display = display; + + const svg = document.createElementNS( svgns, 'svg' ); + this.domElement = svg; + svg.style.position = 'absolute'; + svg.setAttribute( 'class', 'safari-workaround' ); + svg.style.top = '0'; + svg.style.left = '0'; + // @ts-ignore + svg.style[ 'pointer-events' ] = 'none'; + + display.sizeProperty.link( dimension => { + svg.setAttribute( 'width', '' + dimension.width ); + svg.setAttribute( 'height', '' + dimension.height ); + svg.style.clip = `rect(0px,${dimension.width}px,${dimension.height}px,0px)`; + } ); + + this.rect = document.createElementNS( svgns, 'rect' ); + + svg.appendChild( this.rect ); + + this.update(); + } + + public update(): void { + + + const random = dotRandom.nextDouble(); + + this.rect.setAttribute( 'x', '' + random ); + this.rect.setAttribute( 'y', '' + random ); + this.rect.setAttribute( 'style', `fill: rgba(255,200,100,${random * 0.1}); stroke: none;` ); + if ( this.display.width ) { + this.rect.setAttribute( 'width', '' + ( this.display.width - random * 2 ) ); + } + if ( this.display.height ) { + this.rect.setAttribute( 'height', '' + ( this.display.height - random * 2 ) ); + } + } +} + +scenery.register( 'SafariWorkaroundOverlay', SafariWorkaroundOverlay ); Index: js/display/SVGBlock.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/display/SVGBlock.js b/js/display/SVGBlock.js --- a/js/display/SVGBlock.js (revision f88a677207ed72d4dfbfd95f68e1a17652b49db3) +++ b/js/display/SVGBlock.js (date 1668220553185) @@ -8,6 +8,7 @@ import cleanArray from '../../../phet-core/js/cleanArray.js'; import Poolable from '../../../phet-core/js/Poolable.js'; +import dotRandom from '../../../dot/js/dotRandom.js'; import { CountMap, FittedBlock, scenery, SVGGroup, svgns, Utils } from '../imports.js'; class SVGBlock extends FittedBlock { @@ -80,6 +81,9 @@ this.baseTransformGroup = document.createElementNS( svgns, 'g' ); this.svg.appendChild( this.baseTransformGroup ); + this.workaroundRect = document.createElementNS( svgns, 'rect' ); + this.svg.appendChild( this.workaroundRect ); + this.domElement = this.svg; } @@ -278,6 +282,15 @@ // checks will be done in updateFit() to see whether it is needed this.updateFit(); + const random = dotRandom.nextDouble(); + this.workaroundRect.setAttribute( 'x', '' + random ); + this.workaroundRect.setAttribute( 'y', '' + random ); + const width = Number.parseFloat( this.svg.getAttribute( 'width' ) ); + const height = Number.parseFloat( this.svg.getAttribute( 'height' ) ); + this.workaroundRect.setAttribute( 'style', `fill: rgba(255,200,100,${random * 0.1}); stroke: none;` ); + this.workaroundRect.setAttribute( 'width', '' + ( width - random * 2 ) ); + this.workaroundRect.setAttribute( 'height', '' + ( height - random * 2 ) ); + return true; } Index: js/display/Display.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/display/Display.ts b/js/display/Display.ts --- a/js/display/Display.ts (revision f88a677207ed72d4dfbfd95f68e1a17652b49db3) +++ b/js/display/Display.ts (date 1668219829256) @@ -68,6 +68,7 @@ import UtteranceQueue from '../../../utterance-queue/js/UtteranceQueue.js'; import { BackboneDrawable, Block, CanvasBlock, CanvasNodeBoundsOverlay, ChangeInterval, Color, DOMBlock, DOMDrawable, Drawable, Features, FittedBlockBoundsOverlay, FocusManager, FullScreen, globalKeyStateTracker, HighlightOverlay, HitAreaOverlay, Input, InputOptions, Instance, KeyboardUtils, Node, PDOMInstance, PDOMSiblingStyle, PDOMTree, PDOMUtils, PointerAreaOverlay, PointerOverlay, Renderer, scenery, scenerySerialize, SelfDrawable, TInputListener, TOverlay, Trail, Utils, WebGLBlock } from '../imports.js'; import TEmitter from '../../../axon/js/TEmitter.js'; +import SafariWorkaroundOverlay from '../overlays/SafariWorkaroundOverlay.js'; export type DisplayOptions = { // Initial (or override) display width @@ -79,6 +80,10 @@ // Applies CSS styles to the root DOM element that make it amenable to interactive content allowCSSHacks?: boolean; + // Whether we allow the display to put a rectangle in front of everything that subtly shifts every frame, in order to + // force repaints for https://github.com/phetsims/scenery/issues/1503. + allowSafariRedrawWorkaround?: boolean; + // Usually anything displayed outside our dom element is hidden with CSS overflow. allowSceneOverflow?: boolean; @@ -320,6 +325,8 @@ // {boolean} - Applies CSS styles to the root DOM element that make it amenable to interactive content allowCSSHacks: true, + allowSafariRedrawWorkaround: true, + // {boolean} - Usually anything displayed outside of our dom element is hidden with CSS overflow allowSceneOverflow: false, @@ -458,6 +465,10 @@ featureSpecificAnnouncingControlPropertyName: 'descriptionCanAnnounceProperty' } ); + if ( platform.safari && options.allowSafariRedrawWorkaround ) { + this.addOverlay( new SafariWorkaroundOverlay( this ) ); + } + this.focusManager = new FocusManager(); // Features that require the HighlightOverlay ```

[jonathanolson]

It's persistent enough that I'm able to see that the GAO issue is related to the arrow.

[jonathanolson]

The line seems to be along the top of the bounding box of the arrow pointing down and to the right.

[jonathanolson]

Adjusting the stroke of the arrow results in the buggy line also changing to that color.

Here's a given path description that's buggy:

<path d="M 457.75108193500130937537 250.67387339438985804918 L 632.18383622661906429130 864.12617889168723195326 L 627.37448216689494984166 865.49369983420137941721 L 638.69107608402407549875 877.87048059960238788335 L 641.80254434606717950373 861.39113700665848227800 L 636.99319028634317874094 862.75865794917285711563 L 462.56043599472542382500 249.30635245187554005497 L 457.75108193500130937537 250.67387339438985804918 Z " style="fill: rgb(50,130,215); stroke: rgb(255,0,0);stroke-miterlimit: 10;"></path>

[jonathanolson]

Fairly minimal example of the Safari GAO issue:

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Arrow bug test</title>
</head>
<body>
  <svg focusable="false" width="1502" height="566">
    <g transform="matrix(0.84317049365593055299,0.00000000000000000000,0.00000000000000000000,0.84317049365593055299,319.29670724816355686926,0.00000000000000000000)">
      <g transform="scale(0.80000000000000004441)">
        <path d="M 429.73685877293036128322 152.33263688218951870113 L 475.96967537052415764265 314.78633972164936949412 L 471.16063094948151501740 316.15494914600617448741 L 482.48002585411597920029 328.52916827259900856006 L 485.58776421260949973657 312.04912087293575950753 L 480.77871979156685711132 313.41773029729256450082 L 434.54590319397306075189 150.96402745783271370783 L 429.73685877293036128322 152.33263688218951870113 Z" style="fill: rgb(50,130,215); stroke: rgb(64,64,64);"></path>
      </g>
    </g>
  </svg>
</body>
</html>

is resulting in the buggy case for me:

[jonathanolson]

Adding a "M 0 0" (move to 0,0) at the end of the path seems to work around the issue:

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Arrow bug test</title>
</head>
<body>
  <svg focusable="false" width="1502" height="566">
    <g transform="matrix(0.84317049365593055299,0.00000000000000000000,0.00000000000000000000,0.84317049365593055299,319.29670724816355686926,0.00000000000000000000)">
      <g transform="scale(0.80000000000000004441)">
        <path d="M 429.73685877293036128322 152.33263688218951870113 L 475.96967537052415764265 314.78633972164936949412 L 471.16063094948151501740 316.15494914600617448741 L 482.48002585411597920029 328.52916827259900856006 L 485.58776421260949973657 312.04912087293575950753 L 480.77871979156685711132 313.41773029729256450082 L 434.54590319397306075189 150.96402745783271370783 L 429.73685877293036128322 152.33263688218951870113 Z M 0 0" style="fill: rgb(50,130,215); stroke: rgb(64,64,64);"></path>
      </g>
    </g>
  </svg>
</body>
</html>

[jonathanolson]

Unfortunately... BOTH workarounds are needed (neither affects the other). The overlay workaround may reduce some performance (@KatieWoe can I build some versions or do some dev versions to compare?)

@Nancy-Salpepi can you verify that the above commit fixes this issue?

[jonathanolson]

In case I can work around this in a more performant way (e.g. using Line differently in Safari SVG, with a path instead of a line segment), I'm checking into the reproduction.

Does not update with line color. Cannot isolate with HTML, repaints trigger a clear.

[jonathanolson]

Not related to the lines' stroke

[jonathanolson]

Matches the stroke of the projection path.

[jonathanolson]

Buggy path (conditional):

<path d="M -42 -112 L 42 -134 L 42 134 L -42 112 L -42 -112 Z  M0 0" style="fill: rgb(255,255,255); stroke: red;stroke-width: 2;stroke-miterlimit: 10;"></path>

[jonathanolson]

Adjusting things with the path doesn't work. Adjusting line segments to be displayed in SVG with paths with the other workaround isn't effective. Anything that repaints the trapezoid removes the buggy issue.

I think it's best to see the performance impact of the workaround.

[Nancy-Salpepi]

@jonathanolson this looks fixed on the mac/iPad. I wasn't able to produce any artifacts on master.

[pixelzoom]

@jonathanolson what's the status here? I see you're still doing performance comparisons in https://github.com/phetsims/qa/issues/856. This is the sole issue blocking RC publication.

[kathy-phet]

@pixelzoom - I'm lifting the blocks publication on this. We will use the workaround that is in place.

[kathy-phet]

@jonathanolson - Leaving this open for you until the maintenance release issue is created.

[jonathanolson]

Bug reports submitted:

https://bugs.webkit.org/show_bug.cgi?id=248003 https://bugs.webkit.org/show_bug.cgi?id=248004 https://bugs.webkit.org/show_bug.cgi?id=248005

[pixelzoom]

@jonathanolson @kathy-phet I'm still waiting for update on when/how I should proceed. Your comments above have not answered that question sufficientl. If this is ready to proceed with RC, then someone needs to clearly communicate that, and assign this issue to me so that I know that the work is done.

[pixelzoom]

Let me see if I can summarize, since I want to move forward with this:

• @jonathanolson has opened some bug reports with WebKit
• @kathy-phet is OK with using the Safari-only overlay that was added in https://github.com/phetsims/scenery/commit/8ebb1eb3aae93a70a746f841818228f943581bb7
• I can preceed with GO:Basics RC, and any futher fix/change will be a maintenance release
• This issue can be assigned to me, for verification during RC. If it verified OK, I'll close it.
• I'll create a general issue in scenery to track a more permanent fix, and the WebKit bug reports.

Do I have that correct?

[arouinfar]

@pixelzoom your summary looks accurate to me.

[kathy-phet]

Me too. Thanks for making the common-code issue, for the permenant fix ... which can only come of Safari fixes their bugs.

[pixelzoom]

Further work on this will be done in https://github.com/phetsims/scenery/issues/1502.

[pixelzoom]

Instead of creating new issue https://github.com/phetsims/scenery/issues/1502, we decided to transfer the original issue from geometric-optics-basics to scenery. I'll create a new issue for RC verification in geometric-optics-basics.

[pixelzoom]

As discovered by QA in https://github.com/phetsims/geometric-optics-basics/issues/34#issuecomment-1323679485, the workaround is not working in all cases. I've adjusted the issue labels accordingly.

[pixelzoom]

@kathy-phet said in https://github.com/phetsims/geometric-optics-basics/issues/34#issuecomment-1323923592:

Marking this as "on-hold", as we wait for Safari to address this issue.

[jonathanolson]

There's a chance this could be resolved by OS updates. It looks like it's been reported now by other parties, and seems like it's a bug BELOW webkit.

[marlitas]

Coming from MSaB issue https://github.com/phetsims/mean-share-and-balance/issues/122.

Do we know if this has been resolved yet? Unsure if this is something we need to keep an eye out for going into the next round of development for Mean Share and Balance or if that issue can now be closed. @jonathanolson?

[jonathanolson]

I don't know if it's resolved, it's possible we could set something up to check every time a major OS update comes out.

[marlitas]

@Nancy-Salpepi can you check and see if this has been resolved with the new OS updates that have come out? It seems like a lift we don't have the resources for right now to do that automatically. If it does look resolved I think this issue can be closed.

[Nancy-Salpepi]

@marlitas I hadn't seen them in a while and then last Thursday 2/8 I noticed them again while testing something for @jonathanolson. I am on macOS 14.3 and safari 17.3 (on published and in main).

Here are 2 examples:

1. In the preferences menu with Kannada locale (it doesn't happen immediately but JO was also able to reproduce):

2. The variables in Number Line: Distance--when switching from Y to X a portion of the "y" remains (again--it doesn't happen immediately)

[Nancy-Salpepi]

@jonathanolson Here is another interesting one with Telugu and safari 17.3.1 seen while testing https://github.com/phetsims/qa/issues/1039 but not in published:

https://github.com/phetsims/scenery/assets/87318828/9bf90029-5fdc-4692-bf74-ed07cad220f2

[KatieWoe]

I saw https://github.com/phetsims/scenery/issues/1503#issuecomment-1944153996 on Waves Intro with Telugu as well. And when the icon was selected the part left behind as a graphic seemed cut off.

Edit: Occurs in Tamil and Kannada locale as well. I suspect it is a general issue

[KatieWoe]

One way to get this is, if a character on the home page is taller than normal, go into the page of that icon, then go to the home page again, and part of that character is left behind as you switch icons.

[marlitas]

I have no next steps in this issue. Un-assigning.

[zepumph]

Noting the screenshot from the above issue here: