Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

My using CSS @supports does not work with feature detection

I am trying to perform a specific CSS action on a CSS class if you are using the Edge browser, however, the code I work fails to detect the CSS property that I thought was specific to Edge:

CSS:
.gallery, .game {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-around;
    text-align: center;
    min-height: 0px;
}

/* DEFAULT FOR PCs AND NON-TOUCHSCREEN DEVICES */
.gallery-thumb, .game-thumb {
    margin: 0.5%;
    margin-left: 0;
    margin-right: 0;
}

@supports (-ms-box-sizing: border-box) {
    [class*="gallery-thumb"] {
        padding-left: 2px;
        padding-right: 2px;
    }
}

In case you are wondering about application, it can be found here My Gallery Page (the view is correct in Chrome and Firefox but incorrect in Edge).

I am totally stumped as to what to do, especially since the issue in the CSS flexbox is only specific to Edge and nowhere else (I thought of a quick fix involving padding in between each image, but CSS @supports does not work for me).

Please help; this is a definitely live display issue for Edge users to my page

Thanks
 
None of the padding takes place in the CSS @supports block, nor anything else, because "-ms-box-sizing" is not supported in my version of Edge, nor is "-ms-ime-align" nor anything starting with "-ms-*".

I am trying to find a very specific CSS property supported only by Edge, whether Chromium Edge or otherwise, and, so far, I haven't found anything.

For reference, look at my Gallery in My Gallery Page in Edge vs Chrome or Firefox to see what I mean; I use Javascript in the meantime via browser detection (yeah I know bad idea but the ONLY idea that I can find) to detect Edge (Chromium, etc.) vs Chrome/Firefox. I would prefer to use CSS instead to tell me if you're looking at my Gallery page in Edge vs Chrome or Firefox
 
It's not "hurtful"; it does not properly evenly space the Gallery images in Edge as opposed to Chrome/Firefox using the original CSS Flexbox properties:

CSS:
.gallery, .game {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-around;
    text-align: center;
    min-height: 0px;
}

The issue appears to be justify-content: space-evenly;: Chrome and Firefox will space the images evenly, whereas Edge will ignore this rule and scrunch them together with no space in between the images (I have since used a Javascript "patch" that will force the rows in Edge to only have 5 images per row instead of 6 images per row for Chrome/Firefox to ensure that they're not scrunched together in Edge)
 
I don't think Edge is ignoring justify-content: space-evenly; as you seem to suggest. In any case this W3C demo works identically in Edge and Chrome.
There should seldom, if ever, be a reason to look for properties that are particular to one specific browser.
 
Ok, I reverse-engineered everything for you to see the original problem. Please go here:

My Gallery Page

Please go to this page, viewing it in Edge, Chrome and Firefox. You will see how different (wrong) it looks in Edge vs how it looks (correct) in Chrome and Firefox. Here is my CSS code:

CSS:
.gallery, .game {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-around;
    text-align: center;
    min-height: 0px;
}

/* DEFAULT FOR PCs AND NON-TOUCHSCREEN DEVICES */
.gallery-thumb, .game-thumb {
    margin: 0.5%;
    margin-left: 0;
    margin-right: 0;
}

@supports (-ms-ime-align: auto) {
    [class*="gallery-thumb"] {
        padding-left: 2px;
        padding-right: 2px;
    }
}

Please help me understand what went wrong; I simply can't figure it out.

Thanks
 
I do. On Edge the images are next to each other without space. On Chrome the images are spaced evenly apart from each other.
We'll have to assume your Edge is borked... What is your version ? Mine is 112.0.1722.68 (Official build) (64-bit) which is the most recent.
Perhaps remove and re-install would help. Worth a try.
 
Hm, sorry to say I have no clue then why you are seeing a difference. You would not have modified any settings I suppose, or be running in some compatibility mode ? I still think it might be worth a try to re-install Edge.
 
Last edited by a moderator:
Ok, it appears that there is an issue in Edge whereby too many images per row causes them to scrunch together. I am working on a fix for it; I don't know any other way to do so other than this:

JavaScript:
handleImageRowsEdge() {
        if (!HAS_QS && isEdge() && !isChrome() && !isFirefox() && getNumPerRow() > MAX_IMAGES_PER_ROW_EDGE) {
            const numImages = (this.state.json != null && this.state.json.length > 0)
            ? this.state.json.length
            : JSON.parse(IMAGE_JSON_ARRAY_STR).length;
            let obj;
            
            for (let i = 0; i < numImages; i++) {
                obj = document.getElementById(`image${i + 1}_box`);
                if (typeof obj !== 'undefined' && obj != null) {
                    obj.style.paddingLeft = '0.5px';
                    obj.style.paddingRight = '0px';
                }
            }
        }
    }

This is a method is a React component. I am going to upload this to Production and let others see how this looks in Edge vs Chrome/Firefox
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom