From b1609a6907950017d9450b2a08c93dd19a66fcfa Mon Sep 17 00:00:00 2001
From: Tushar Kumar <153719983+TusharNaugain@users.noreply.github.com>
Date: Sun, 27 Oct 2024 19:59:26 +0530
Subject: [PATCH] Update flexgap.js (#2749)

* Update flexgap.js

Added a check for the type of result: In the previous code, there was no check for the type of result. In the updated code, I added a check to ensure that result is a string, and if not, an error message is logged. 4

* Update flexgap.js

Added a check for Safari bug:

var isSupported = flexHeight === 1 || flexHeight === 2;
Reason: Safari, at zoom levels of 50% and 150%, returns scrollHeight as 2 instead of 1 for flex containers. This line ensures the test works across different browsers, including buggy Safari versions.

---------

Co-authored-by: veeck <gitkraken@veeck.de>
---
 feature-detects/css/flexgap.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/feature-detects/css/flexgap.js b/feature-detects/css/flexgap.js
index ebb87bb7..dd308c49 100644
--- a/feature-detects/css/flexgap.js
+++ b/feature-detects/css/flexgap.js
@@ -11,21 +11,29 @@
   "authors": ["Chris Smith (@chris13524)"]
 }
 !*/
+
 define(['Modernizr', 'createElement', 'docElement'], function(Modernizr, createElement, docElement) {
   Modernizr.addTest('flexgap', function() {
-    // create flex container with row-gap set
+    // Create a flex container with row-gap set
     var flex = createElement('div');
     flex.style.display = 'flex';
     flex.style.flexDirection = 'column';
     flex.style.rowGap = '1px';
 
-    // create two elements inside it
+    // Create two child elements inside it
     flex.appendChild(createElement('div'));
     flex.appendChild(createElement('div'));
 
-    // append to the DOM (needed to obtain scrollHeight)
+    // Append the flex container to the DOM (required to calculate scrollHeight)
     docElement.appendChild(flex);
-    var isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
+
+    // Measure the height of the flex container
+    var flexHeight = flex.scrollHeight;
+
+    // Determine if flex-gap is supported, accounting for Safari's bug
+    var isSupported = flexHeight === 1 || flexHeight === 2;
+
+    // Clean up: Remove the flex container from the DOM
     flex.parentNode.removeChild(flex);
 
     return isSupported;