From f001c2d52281344c372d821bd0aacd479626a18b Mon Sep 17 00:00:00 2001
From: "gourijain026@gmail.com" <gourijain@example.com>
Date: Fri, 20 Feb 2026 01:40:16 +0530
Subject: [PATCH] Resolve Safari layout bug on header component

---
 package-lock.json                        |  5 +++++
 src/core/p5.Element.js                   |  6 +++++
 test/manual-test-examples/tint/sketch.js | 28 +++++++++++++++++++-----
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2459b0a03f..c93fc3edf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,6 +97,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.7.7.tgz",
       "integrity": "sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.5.5",
         "@babel/generator": "^7.7.7",
@@ -2257,6 +2258,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
       "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7447,6 +7449,7 @@
       "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.6.1.tgz",
       "integrity": "sha512-/ABUy3gYWu5iBmrUSRBP97JLpQUm0GgVveDCp6t3yRNIoltIYw7rEj3g5y1o2PGPR2vfTRGa7WC/LZHLTXnEzA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "dateformat": "~4.6.2",
         "eventemitter2": "~0.4.13",
@@ -11293,6 +11296,7 @@
       "integrity": "sha512-VZlYo/WE8t1tstuRmqgeyBgCbJc/lEdopaa+axcKzTBJ+UIdlAB9XnmvTCAH4pwR4ElNInaedhEBmZD8iCSVEg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-colors": "^4.1.3",
         "browser-stdout": "^1.3.1",
@@ -12434,6 +12438,7 @@
       "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz",
       "integrity": "sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@samverschueren/stream-to-observable": "^0.3.0",
         "is-observable": "^1.1.0",
diff --git a/src/core/p5.Element.js b/src/core/p5.Element.js
index 3a42721d8c..8269e1eaf9 100644
--- a/src/core/p5.Element.js
+++ b/src/core/p5.Element.js
@@ -996,6 +996,12 @@ p5.Element = class {
       p5.Element._detachListener(ev, ctx);
     }
     const f = fxn.bind(ctx);
+    // Safari fix: <select> elements sometimes ignore 'input' events
+    if (ctx.elt.tagName === 'SELECT' && ev === 'input') {
+      ctx.elt.addEventListener('change', f, false);
+    }
+
+
     ctx.elt.addEventListener(ev, f, false);
     ctx._events[ev] = f;
   }
diff --git a/test/manual-test-examples/tint/sketch.js b/test/manual-test-examples/tint/sketch.js
index c9e02f4062..bd81b29eae 100644
--- a/test/manual-test-examples/tint/sketch.js
+++ b/test/manual-test-examples/tint/sketch.js
@@ -1,20 +1,38 @@
+// ===== sketch.js =====
 var img;
+let sel; // global variable for dropdown
 
 function preload() {
-  img = loadImage('flowers.jpg');
+  img = loadImage('flowers.jpg'); // make sure the image is in the same folder
 }
 
 function setup() {
   createCanvas(800, 160);
+
+  // Draw white rectangle as background
   fill(255, 255, 255);
   rect(0, 0, 480, 160);
+
+  // Draw images with different tints
   image(img, 0, 0);
-  tint(0, 0, 150, 150); // Tint alpha blue
+  tint(0, 0, 150, 150); // Alpha blue
   image(img, 160, 0);
-  tint(255, 255, 255);
+  tint(255, 255, 255); // Normal
   image(img, 320, 0);
-  tint(0, 153, 150); // Tint turquoise
+  tint(0, 153, 150); // Turquoise
   image(img, 480, 0);
-  noTint();
+  noTint(); // Default
   image(img, 640, 0);
+
+  // ===== Safari createSelect() test =====
+  sel = createSelect();
+  sel.option('Option 1');
+  sel.option('Option 2');
+  sel.option('Option 3');
+  sel.position(10, 180); // position below canvas
+  sel.changed(() => {
+    console.log('Changed to:', sel.value());
+  });
 }
+
+// No draw() function needed — keeps dropdown visible