AtHeartEngineer/Modernizr
1
1
Fork 0
mirror of https://github.com/Modernizr/Modernizr.git synced 2026-01-08 23:27:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update flexgap.js (#2749)

Browse Source 
* 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>
This commit is contained in:
Tushar Kumar
2024-10-27 19:59:26 +05:30
committed by GitHub
parent 796e72c408
commit b1609a6907
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
feature-detects/css/flexgap.js
View File

@@ -11,21 +11,29 @@
"authors": ["Chris Smith (@chris13524)"] "authors": ["Chris Smith (@chris13524)"]
} }
!*/ !*/
define(['Modernizr', 'createElement', 'docElement'], function(Modernizr, createElement, docElement) { define(['Modernizr', 'createElement', 'docElement'], function(Modernizr, createElement, docElement) {
Modernizr.addTest('flexgap', function() { Modernizr.addTest('flexgap', function() {
// create flex container with row-gap set // Create a flex container with row-gap set
var flex = createElement('div'); var flex = createElement('div');
flex.style.display = 'flex'; flex.style.display = 'flex';
flex.style.flexDirection = 'column'; flex.style.flexDirection = 'column';
flex.style.rowGap = '1px'; flex.style.rowGap = '1px';
// create two elements inside it // Create two child elements inside it
flex.appendChild(createElement('div')); flex.appendChild(createElement('div'));
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); 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); flex.parentNode.removeChild(flex);
return isSupported; return isSupported;