Artifacts with Safari

[Nancy-Salpepi]

Test device MacBook Air M1 chip

Operating System 14.3.1

Browser Safari 17.3.1

Problem description I noticed that sometimes, especially in fast mode, I am seeing a white square in the upper left corner of the screen when a button is pressed and a white bar in the field area when a projectile is launched. @matthew-blackman was also able to reproduce.

I do not see this issue in mac + chrome.

Visuals

https://github.com/phetsims/projectile-data-lab/assets/87318828/26d1e52e-d853-424a-b5ee-0b2c608f790f

[samreid]

This patch gets rid of some transient white rectangles to the left of the field sign

Subject: [PATCH] Remove readonly from blackBoxBounds, see https://github.com/phetsims/circuit-construction-kit-black-box-study/issues/78
---
Index: js/common/view/SelectorNode.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/common/view/SelectorNode.ts b/js/common/view/SelectorNode.ts
--- a/js/common/view/SelectorNode.ts    (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec)
+++ b/js/common/view/SelectorNode.ts    (date 1709216057663)
@@ -127,8 +127,8 @@

     // enable/disable arrow buttons
     const updateEnabled = () => {
-      incrementButton.enabled = numberProperty.value + 1 <= rangeProperty.value.max;
-      decrementButton.enabled = numberProperty.value - 1 >= rangeProperty.value.min;
+      // incrementButton.enabled = numberProperty.value + 1 <= rangeProperty.value.max;
+      // decrementButton.enabled = numberProperty.value - 1 >= rangeProperty.value.min;
     };

     // synchronize with number value

[samreid]

I was surprised to see that, after removing almost everything except the lunch button and the background and converting the background to be a solid rectangle, I still see a similar artifact (note the tiny white pixel in the top left)

It sometimes correlates with the launch action.

[samreid]

Using the scenery inspector, I see spurious white vertical lines in unexpected places. The mouse cursor is in the top left quadrant:

[samreid]

I am still seeing the dot intermittently with the sim mostly decimated (no launch button either)

```diff Subject: [PATCH] Remove readonly from blackBoxBounds, see https://github.com/phetsims/circuit-construction-kit-black-box-study/issues/78 --- Index: projectile-data-lab/js/common/view/SelectorNode.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/common/view/SelectorNode.ts b/projectile-data-lab/js/common/view/SelectorNode.ts --- a/projectile-data-lab/js/common/view/SelectorNode.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/common/view/SelectorNode.ts (date 1709216057663) @@ -127,8 +127,8 @@ // enable/disable arrow buttons const updateEnabled = () => { - incrementButton.enabled = numberProperty.value + 1 <= rangeProperty.value.max; - decrementButton.enabled = numberProperty.value - 1 >= rangeProperty.value.min; + // incrementButton.enabled = numberProperty.value + 1 <= rangeProperty.value.max; + // decrementButton.enabled = numberProperty.value - 1 >= rangeProperty.value.min; }; // synchronize with number value Index: projectile-data-lab/js/variability/view/VariabilityScreenView.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/variability/view/VariabilityScreenView.ts b/projectile-data-lab/js/variability/view/VariabilityScreenView.ts --- a/projectile-data-lab/js/variability/view/VariabilityScreenView.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/variability/view/VariabilityScreenView.ts (date 1709216738903) @@ -70,7 +70,7 @@ model.fieldProperty ); - this.launcherLayer.addChild( this.launcherNode ); + // this.launcherLayer.addChild( this.launcherNode ); } } projectileDataLab.register( 'VariabilityScreenView', VariabilityScreenView ); \ No newline at end of file Index: projectile-data-lab/js/common/view/PDLScreenView.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/common/view/PDLScreenView.ts b/projectile-data-lab/js/common/view/PDLScreenView.ts --- a/projectile-data-lab/js/common/view/PDLScreenView.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/common/view/PDLScreenView.ts (date 1709218798306) @@ -10,7 +10,7 @@ import ScreenView, { ScreenViewOptions } from '../../../../joist/js/ScreenView.js'; import projectileDataLab from '../../projectileDataLab.js'; import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js'; -import { HBox, ManualConstraint, Node, createGatedVisibleProperty } from '../../../../scenery/js/imports.js'; +import { HBox, ManualConstraint, Node, createGatedVisibleProperty, Rectangle } from '../../../../scenery/js/imports.js'; import PDLConstants from '../PDLConstants.js'; import ProjectileDataLabStrings from '../../ProjectileDataLabStrings.js'; import PDLColors from '../PDLColors.js'; @@ -86,16 +86,16 @@ this.canvasBounds = ScreenView.DEFAULT_LAYOUT_BOUNDS.dilatedX( canvasMarginRight / 2 ) .shiftedX( canvasMarginRight / 2 ); - const background = new GradientBackgroundNode( - 0, - 0, - 1, - 1, - PDLColors.screenBackgroundTopColorProperty, - PDLColors.screenBackgroundBottomColorProperty, - 0, - 1 - ); + const background = new Rectangle( -1000, -1000, 5000, 5000, { fill: 'blue' } ); + // 0, + // 0, + // 1, + // 1, + // PDLColors.screenBackgroundTopColorProperty, + // PDLColors.screenBackgroundBottomColorProperty, + // 0, + // 1 + // ); this.visibleBoundsProperty.link( visibleBounds => { background.translation = visibleBounds.leftTop; @@ -219,17 +219,17 @@ } ); this.addChild( background ); - this.addChild( fieldBack ); - this.addChild( fieldOverlayBack ); - this.addChild( this.behindProjectilesLayer ); - this.addChild( this.projectileLayer ); - this.addChild( this.launcherLayer ); - this.addChild( fieldFront ); - this.addChild( fieldOverlayFront ); - this.addChild( this.launchButton ); - this.addChild( this.singleOrContinuousRadioButtonGroup ); - this.addChild( this.noAirResistanceText ); - this.addChild( this.eraseResetContainer ); + // this.addChild( fieldBack ); + // this.addChild( fieldOverlayBack ); + // this.addChild( this.behindProjectilesLayer ); + // this.addChild( this.projectileLayer ); + // this.addChild( this.launcherLayer ); + // this.addChild( fieldFront ); + // this.addChild( fieldOverlayFront ); + // this.addChild( this.launchButton ); + // this.addChild( this.singleOrContinuousRadioButtonGroup ); + // this.addChild( this.noAirResistanceText ); + // this.addChild( this.eraseResetContainer ); } /** Index: projectile-data-lab/js/common/view/PDLCanvasNode.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/common/view/PDLCanvasNode.ts b/projectile-data-lab/js/common/view/PDLCanvasNode.ts --- a/projectile-data-lab/js/common/view/PDLCanvasNode.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/common/view/PDLCanvasNode.ts (date 1709215756640) @@ -80,78 +80,78 @@ protected drawOutlierGraphicsForLandedProjectiles( landedProjectiles: Projectile[], context: CanvasRenderingContext2D ): void { // Force field graphics for landed outliers - landedProjectiles.forEach( projectile => { - if ( projectile.x > 100 || projectile.x < 0 ) { - const viewPoint = this.modelViewTransform.modelToViewXY( projectile.x, projectile.y ); - context.save(); - context.translate( viewPoint.x, viewPoint.y ); - context.scale( PDLConstants.PROJECTILE_IMAGE_SCALE_FACTOR, PDLConstants.PROJECTILE_IMAGE_SCALE_FACTOR ); - context.drawImage( forceField_png, -forceField_png.width / 2, -forceField_png.height / 4 ); - context.restore(); - } - } ); + // landedProjectiles.forEach( projectile => { + // if ( projectile.x > 100 || projectile.x < 0 ) { + // const viewPoint = this.modelViewTransform.modelToViewXY( projectile.x, projectile.y ); + // context.save(); + // context.translate( viewPoint.x, viewPoint.y ); + // context.scale( PDLConstants.PROJECTILE_IMAGE_SCALE_FACTOR, PDLConstants.PROJECTILE_IMAGE_SCALE_FACTOR ); + // context.drawImage( forceField_png, -forceField_png.width / 2, -forceField_png.height / 4 ); + // context.restore(); + // } + // } ); } protected drawPathForProjectile( context: CanvasRenderingContext2D, projectile: Projectile ): void { - context.beginPath(); - let pathStarted = false; - - const drawLineToProjectileAtTime = ( t: number ): void => { - const pathX = Projectile.getProjectileX( projectile.launchSpeed, projectile.launchAngle, t ); - const pathY = Projectile.getProjectileY( projectile.launchSpeed, projectile.launchAngle, projectile.launchHeight, t ); - const viewPoint = this.modelViewTransform.modelToViewXY( pathX, pathY ); - - if ( !pathStarted ) { - context.moveTo( viewPoint.x, viewPoint.y ); - pathStarted = true; - } - - context.lineTo( viewPoint.x, viewPoint.y ); - }; - - for ( let t = 0; t < projectile.timeAirborne; t += 0.02 ) { - drawLineToProjectileAtTime( t ); - } - - drawLineToProjectileAtTime( projectile.timeAirborne ); - context.stroke(); + // context.beginPath(); + // let pathStarted = false; + // + // const drawLineToProjectileAtTime = ( t: number ): void => { + // const pathX = Projectile.getProjectileX( projectile.launchSpeed, projectile.launchAngle, t ); + // const pathY = Projectile.getProjectileY( projectile.launchSpeed, projectile.launchAngle, projectile.launchHeight, t ); + // const viewPoint = this.modelViewTransform.modelToViewXY( pathX, pathY ); + // + // if ( !pathStarted ) { + // context.moveTo( viewPoint.x, viewPoint.y ); + // pathStarted = true; + // } + // + // context.lineTo( viewPoint.x, viewPoint.y ); + // }; + // + // for ( let t = 0; t < projectile.timeAirborne; t += 0.02 ) { + // drawLineToProjectileAtTime( t ); + // } + // + // drawLineToProjectileAtTime( projectile.timeAirborne ); + // context.stroke(); } protected drawProjectile( context: CanvasRenderingContext2D, projectile: Projectile, isLanded: boolean, isSelected: boolean ): void { - const viewPoint = this.modelViewTransform.modelToViewXY( projectile.x, projectile.y ); - let image: HTMLImageElement; - - if ( projectile.type === PUMPKIN ) { - if ( isLanded ) { - image = isSelected ? PUMPKIN_LANDED_SELECTED_IMAGES[ projectile.landedImageIndex ] : PUMPKIN_LANDED_IMAGES[ projectile.landedImageIndex ]; - } - else { - image = pumpkin_png; - } - } - else if ( projectile.type === PIANO ) { - image = isLanded ? ( isSelected ? pianoLandedSelected_png : pianoLanded_png ) : piano_png; - } - else { - image = isLanded ? ( isSelected ? cannonballLandedSelected_png : cannonballLanded_png ) : cannonball_png; - } - - // Save the current state of the canvas - context.save(); - - // Move to the center of where we want to draw our image - context.translate( viewPoint.x, viewPoint.y ); - - const imageScaleX = projectile.isFlippedHorizontally ? -1 : 1; - context.scale( imageScaleX * PDLConstants.PROJECTILE_IMAGE_SCALE_FACTOR, PDLConstants.PROJECTILE_IMAGE_SCALE_FACTOR ); - - // Draw the image on the flipped context - // Since the context is flipped, adjust the position by negating half of the width - context.drawImage( image, -image.width / 2, -image.height / 2 ); - - // Restore the context to its original state - context.restore(); + // const viewPoint = this.modelViewTransform.modelToViewXY( projectile.x, projectile.y ); + // let image: HTMLImageElement; + // + // if ( projectile.type === PUMPKIN ) { + // if ( isLanded ) { + // image = isSelected ? PUMPKIN_LANDED_SELECTED_IMAGES[ projectile.landedImageIndex ] : PUMPKIN_LANDED_IMAGES[ projectile.landedImageIndex ]; + // } + // else { + // image = pumpkin_png; + // } + // } + // else if ( projectile.type === PIANO ) { + // image = isLanded ? ( isSelected ? pianoLandedSelected_png : pianoLanded_png ) : piano_png; + // } + // else { + // image = isLanded ? ( isSelected ? cannonballLandedSelected_png : cannonballLanded_png ) : cannonball_png; + // } + // + // // Save the current state of the canvas + // context.save(); + // + // // Move to the center of where we want to draw our image + // context.translate( viewPoint.x, viewPoint.y ); + // + // const imageScaleX = projectile.isFlippedHorizontally ? -1 : 1; + // context.scale( imageScaleX * PDLConstants.PROJECTILE_IMAGE_SCALE_FACTOR, PDLConstants.PROJECTILE_IMAGE_SCALE_FACTOR ); + // + // // Draw the image on the flipped context + // // Since the context is flipped, adjust the position by negating half of the width + // context.drawImage( image, -image.width / 2, -image.height / 2 ); + // + // // Restore the context to its original state + // context.restore(); } } Index: projectile-data-lab/js/common/view/BinControlNode.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/common/view/BinControlNode.ts b/projectile-data-lab/js/common/view/BinControlNode.ts --- a/projectile-data-lab/js/common/view/BinControlNode.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/common/view/BinControlNode.ts (date 1709217680800) @@ -98,18 +98,18 @@ rightMargin: margin } } ), - new ToggleNode( PDLPreferences.binStrategyProperty, [ { - value: 'binWidth', - createNode: () => new BinWidthComboBox() - }, { - value: 'totalBins', - createNode: () => new TotalBinsComboBox() - } ], { - alignChildren: ToggleNode.LEFT, - layoutOptions: { - rightMargin: margin - } - } ) + // new ToggleNode( PDLPreferences.binStrategyProperty, [ { + // value: 'binWidth', + // createNode: () => new BinWidthComboBox() + // }, { + // value: 'totalBins', + // createNode: () => new TotalBinsComboBox() + // } ], { + // alignChildren: ToggleNode.LEFT, + // layoutOptions: { + // rightMargin: margin + // } + // } ) ] }, providedOptions ); Index: projectile-data-lab/js/common/view/LaunchButton.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/common/view/LaunchButton.ts b/projectile-data-lab/js/common/view/LaunchButton.ts --- a/projectile-data-lab/js/common/view/LaunchButton.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/common/view/LaunchButton.ts (date 1709218756851) @@ -71,11 +71,11 @@ soundManager.addSoundGenerator( autoGenerateButtonSoundClip, { categoryName: 'user-interface' } ); const options = optionize()( { - content: launchButtonWithAutogenerateToggleNode, - baseColor: PDLColors.launchButtonColorProperty, - disabledColor: PDLColors.launchButtonDisabledColorProperty, - size: new Dimension2( 85, 45 ), - yMargin: 5, + // content: launchButtonWithAutogenerateToggleNode, + // baseColor: PDLColors.launchButtonColorProperty, + // disabledColor: PDLColors.launchButtonDisabledColorProperty, + // size: new Dimension2( 85, 45 ), + // yMargin: 5, phetioFeatured: true, listener: launchButtonPressed, soundPlayer: { Index: projectile-data-lab/js/common/view/HistogramNode.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/common/view/HistogramNode.ts b/projectile-data-lab/js/common/view/HistogramNode.ts --- a/projectile-data-lab/js/common/view/HistogramNode.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/common/view/HistogramNode.ts (date 1709215947629) @@ -356,7 +356,7 @@ histogram.histogramSonifier.toggleSonification(); } } ); - this.addChild( toggleHistogramSoundButton ); + // this.addChild( toggleHistogramSoundButton ); ManualConstraint.create( this, [ this.chartNode, this.chartBackground, horizontalAxisLabel ], ( chartNodeProxy, chartBackgroundProxy, horizontalAxisLabelProxy ) => { horizontalAxisLabelProxy.centerX = chartBackgroundProxy.centerX; Index: joist/js/ScreenView.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/joist/js/ScreenView.ts b/joist/js/ScreenView.ts --- a/joist/js/ScreenView.ts (revision cb2dd1e9e1111a6e67efc7f594186936b56a8504) +++ b/joist/js/ScreenView.ts (date 1709217404326) @@ -148,7 +148,7 @@ // on top of "Control Area" components. children: options.includePDOMNodes ? [ this.pdomTitleNode, - this.pdomScreenSummaryNode, + // this.pdomScreenSummaryNode, this.pdomControlAreaNode, this.pdomPlayAreaNode ] : [ this.pdomTitleNode ] @@ -158,7 +158,7 @@ // pdom - "Play Area" comes before "Control Area" in PDOM this.pdomParentNode.pdomOrder = options.includePDOMNodes ? [ this.pdomTitleNode, - this.pdomScreenSummaryNode, + // this.pdomScreenSummaryNode, this.pdomPlayAreaNode, this.pdomControlAreaNode ] : [ this.pdomTitleNode ]; @@ -228,7 +228,7 @@ this._screenSummaryContent = node; if ( node ) { - this.pdomScreenSummaryNode.addChild( node ); + // this.pdomScreenSummaryNode.addChild( node ); } } Index: projectile-data-lab/js/common-vsm/view/VSMScreenView.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/common-vsm/view/VSMScreenView.ts b/projectile-data-lab/js/common-vsm/view/VSMScreenView.ts --- a/projectile-data-lab/js/common-vsm/view/VSMScreenView.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/common-vsm/view/VSMScreenView.ts (date 1709216831539) @@ -238,18 +238,18 @@ this.positionFieldSignNode(); - this.behindProjectilesLayer.addChild( this.fieldSignNode ); - - this.toolsLayer.addChild( angleToolNode ); - this.toolsLayer.addChild( speedToolNode ); - this.toolsLayer.addChild( this.measuringTapeNode ); - this.toolsLayer.addChild( this.stopwatchNode ); - - this.addChild( this.fieldRadioButtonGroup ); - this.addChild( this.accordionBox ); - this.addChild( this.launchPanel ); - this.addChild( this.topRightUIContainer ); - this.addChild( this.toolsLayer ); + // this.behindProjectilesLayer.addChild( this.fieldSignNode ); + // + // this.toolsLayer.addChild( angleToolNode ); + // this.toolsLayer.addChild( speedToolNode ); + // this.toolsLayer.addChild( this.measuringTapeNode ); + // this.toolsLayer.addChild( this.stopwatchNode ); + // + // this.addChild( this.fieldRadioButtonGroup ); + // this.addChild( this.accordionBox ); + // this.addChild( this.launchPanel ); + // this.addChild( this.topRightUIContainer ); + // this.addChild( this.toolsLayer ); // Position the field selector radio button group this.fieldRadioButtonGroup.bottom = this.layoutBounds.bottom - PDLConstants.SCREEN_VIEW_Y_MARGIN - 5; Index: projectile-data-lab/js/common/view/LauncherNode.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/common/view/LauncherNode.ts b/projectile-data-lab/js/common/view/LauncherNode.ts --- a/projectile-data-lab/js/common/view/LauncherNode.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/common/view/LauncherNode.ts (date 1709216001987) @@ -163,7 +163,7 @@ opacity: 0 } ); - this.launcherBarrel.addChild( launcherFlashNode ); + // this.launcherBarrel.addChild( launcherFlashNode ); launcherFlashNode.moveToBack(); const launcherFlashAnimation = new Animation( { Index: projectile-data-lab/js/common-vsm/view/VSMCanvasNode.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/projectile-data-lab/js/common-vsm/view/VSMCanvasNode.ts b/projectile-data-lab/js/common-vsm/view/VSMCanvasNode.ts --- a/projectile-data-lab/js/common-vsm/view/VSMCanvasNode.ts (revision 78ae4d2394a4e3bfbde4dfba712b391944201bec) +++ b/projectile-data-lab/js/common-vsm/view/VSMCanvasNode.ts (date 1709215873200) @@ -30,75 +30,75 @@ } public override paintCanvas( context: CanvasRenderingContext2D ): void { - - // Order of drawing: - // 1. Force field graphics for landed outliers - // 2: Paths for landed projectile that are not the most recent (if paths are visible) - // 3: Landed projectiles that are not the most recent - // 4: Path for most recent landed projectile (if paths are visible) - // 5: Paths for flying projectiles (if paths are visible) - // 6: Flying projectiles - // 7: Most recent landed projectile - - const landedProjectiles = this.fieldProperty.value.landedProjectiles; - const airborneProjectiles = this.fieldProperty.value.airborneProjectiles; - const highlightedProjectile: Projectile | null = this.fieldProperty.value.selectedProjectileProperty.value; - - // 1. Force field graphics for landed outliers are drawn in PDLCanvasNode - super.drawOutlierGraphicsForLandedProjectiles( landedProjectiles, context ); - - // 2: Paths for landed projectile that are not the most recent (if paths are visible) - if ( this.isPathsVisibleProperty.value ) { - context.lineWidth = 1; - - // Set the path color to be a blend of the initial and final colors, based on the number of projectiles that have landed - // This is to avoid the landed paths from becoming too dark when overlapping - const numLandedProjectiles = landedProjectiles.length; - - // This is the minimum number of projectiles that will cause the path color to be the final color - const PROJECTILES_FOR_FINAL_STROKE_COLOR = 300; - - const colorRatio = Math.min( numLandedProjectiles / PROJECTILES_FOR_FINAL_STROKE_COLOR, 1 ); - const pathColor = PDLColors.pathStrokeLandedInitialColorProperty.value.blend( PDLColors.pathStrokeLandedFinalColorProperty.value, colorRatio ); - context.strokeStyle = pathColor.toCSS(); - - landedProjectiles.forEach( projectile => { - if ( projectile !== highlightedProjectile ) { - this.drawPathForProjectile( context, projectile ); - } - } ); - } - - // 3: Landed projectiles that are not the most recent - landedProjectiles.forEach( projectile => { - if ( projectile !== highlightedProjectile ) { - this.drawProjectile( context, projectile, true, false ); - } - } ); - - // 4: Path for most recent landed projectile (if paths are visible) - if ( this.isPathsVisibleProperty.value && highlightedProjectile ) { - context.strokeStyle = PDLColors.pathStrokeHighlightedColorProperty.value.toCSS(); - this.drawPathForProjectile( context, highlightedProjectile ); - } - - // 5: Paths for flying projectiles (if paths are visible) - if ( this.isPathsVisibleProperty.value ) { - context.strokeStyle = PDLColors.pathStrokeAirborneColorProperty.value.toCSS(); - airborneProjectiles.forEach( projectile => { - this.drawPathForProjectile( context, projectile ); - } ); - } - - // 6: Flying projectiles - for ( let i = 0; i < airborneProjectiles.length; i++ ) { - this.drawProjectile( context, airborneProjectiles[ i ], false, false ); - } - - // 7: Most recent landed projectile - if ( highlightedProjectile ) { - this.drawProjectile( context, highlightedProjectile, true, true ); - } + // + // // Order of drawing: + // // 1. Force field graphics for landed outliers + // // 2: Paths for landed projectile that are not the most recent (if paths are visible) + // // 3: Landed projectiles that are not the most recent + // // 4: Path for most recent landed projectile (if paths are visible) + // // 5: Paths for flying projectiles (if paths are visible) + // // 6: Flying projectiles + // // 7: Most recent landed projectile + // + // const landedProjectiles = this.fieldProperty.value.landedProjectiles; + // const airborneProjectiles = this.fieldProperty.value.airborneProjectiles; + // const highlightedProjectile: Projectile | null = this.fieldProperty.value.selectedProjectileProperty.value; + // + // // 1. Force field graphics for landed outliers are drawn in PDLCanvasNode + // super.drawOutlierGraphicsForLandedProjectiles( landedProjectiles, context ); + // + // // 2: Paths for landed projectile that are not the most recent (if paths are visible) + // if ( this.isPathsVisibleProperty.value ) { + // context.lineWidth = 1; + // + // // Set the path color to be a blend of the initial and final colors, based on the number of projectiles that have landed + // // This is to avoid the landed paths from becoming too dark when overlapping + // const numLandedProjectiles = landedProjectiles.length; + // + // // This is the minimum number of projectiles that will cause the path color to be the final color + // const PROJECTILES_FOR_FINAL_STROKE_COLOR = 300; + // + // const colorRatio = Math.min( numLandedProjectiles / PROJECTILES_FOR_FINAL_STROKE_COLOR, 1 ); + // const pathColor = PDLColors.pathStrokeLandedInitialColorProperty.value.blend( PDLColors.pathStrokeLandedFinalColorProperty.value, colorRatio ); + // context.strokeStyle = pathColor.toCSS(); + // + // landedProjectiles.forEach( projectile => { + // if ( projectile !== highlightedProjectile ) { + // this.drawPathForProjectile( context, projectile ); + // } + // } ); + // } + // + // // 3: Landed projectiles that are not the most recent + // landedProjectiles.forEach( projectile => { + // if ( projectile !== highlightedProjectile ) { + // this.drawProjectile( context, projectile, true, false ); + // } + // } ); + // + // // 4: Path for most recent landed projectile (if paths are visible) + // if ( this.isPathsVisibleProperty.value && highlightedProjectile ) { + // context.strokeStyle = PDLColors.pathStrokeHighlightedColorProperty.value.toCSS(); + // this.drawPathForProjectile( context, highlightedProjectile ); + // } + // + // // 5: Paths for flying projectiles (if paths are visible) + // if ( this.isPathsVisibleProperty.value ) { + // context.strokeStyle = PDLColors.pathStrokeAirborneColorProperty.value.toCSS(); + // airborneProjectiles.forEach( projectile => { + // this.drawPathForProjectile( context, projectile ); + // } ); + // } + // + // // 6: Flying projectiles + // for ( let i = 0; i < airborneProjectiles.length; i++ ) { + // this.drawProjectile( context, airborneProjectiles[ i ], false, false ); + // } + // + // // 7: Most recent landed projectile + // if ( highlightedProjectile ) { + // this.drawProjectile( context, highlightedProjectile, true, true ); + // } } } ```

UPDATE: It looks like the white dot did not capture in the screenshot, but it is there on my rendering.

[samreid]

With @jonathanolson's help, we addressed one of the 3 bugs above. We added a layerSplit to fix the problem and it fixed the field sign one. There are still 2 different bad rectangles in the top left that need investigation.

[samreid]

The larger rectangle appears to be the sceneryTextSizeContainer (or one of its descendants) because when I deleted the sceneryTextSizeContainer from the DOM, the large rectangle disappeared.

[samreid]

The larger rectangle appears to be the sceneryTextSizeContainer (or one of its descendants) because when I deleted the sceneryTextSizeContainer from the DOM, the large rectangle disappeared.

That was incorrect.

I found the background gradient was 1x1 and being scaled. I changed it to have a larger geometry and that appears to have corrected the safari rendering artifacts. I tried to color match the prior version, but would be good for @matthew-blackman to double check. Ready for review. Close if ok.

[matthew-blackman]

This is fixed for me in Safari. Nice work! I reviewed the changed with @samreid and it looks like this was an issue with how I created the GradientBackgroundNode dimensions. We confirmed that it will not affect common code. Closing.