Apple (Mac) computers are rendering basic CSS differently than Windows (both using Chrome). How do I-CodePudding

More detail. I am working with a jcink forum. On the forum there is, for example, an element with a margin: 50px 0 parameter.

On Windows this is centered, but on Mac computers, specifically, it's positioned too high. It's difficult to troubleshoot because it is not a Safari issue or a media query issue, so I can't simply change my browser window (or use developer tools to emulate resolution) to check the issue, as I'm on PC. I have a friend who has an apple computer that I can remote into and occasionally troubleshoot on.

I notice also that if I completely remove margins from the element, on MAC it sets right against the top of the container, but on PC there seems to almost be a 20px or so of padding.

Similar to this issue, in the surrounding element there is less space (margin) on the bottom on PC versus Mac. When I add 25px, for example, it looks fine on PC but adds too much on Mac, respectively.

The overall question is: why is CSS rendering different on Mac than PC and how do I standardize this so that the changes are consistent? Only a few users on this site have Macs but it this should be working regardless of the operating system.

I am adding both the forum this is affecting and the code in question. '

Here is the link (just click the checkmark to get past the first page):

https://colu.jcink.net/index.php?showtopic=5560

The header area with the name "Guy Gardner" is what we are looking at. If you are on a PC it is properly aligned. If you are on a Mac, it is not.

PC, where it is formatted correctly: https://i.stack.imgur.com/lDtPz.png

The container in the top bar with the post header information:

    height: 150px;
    background: rgba(0,0,0,.8);
    background-image: radial-gradient(rgba(255,255,255,1), rgba(0,0,0,1)), url(https://us-east-1-02860049-view.menlosecurity.com/c/0/i/aHR0cHM6Ly9pbWFnZXM4LmFscGhhY29kZXJzLmNvbS85NzQvOTc0NjgyLmpwZw~~?b=GyXJkglY&k=4gWbxECk-JP1jGISJKN_BinYM4QYfjipF4RFQU7liIE~);
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: multiply;
    color: var(--mgroup);
    font-family: 'DC Fandom';
    font-size: 2vw;
    text-align: left;
    text-transform: uppercase;
    text-shadow: var(--colour4) 1px 0px;
    letter-spacing: -1px;
    overflow: hidden;
    z-index: 3;
    border-top: 10px solid var(--mgroup);
}```

```.ecmpost .ectopbar {
    padding-bottom: 25px;
}```

One of the issues is that the padding (on the 1920 media query at least) adds too much padding on Mac, though on PC it's perfectly aligned.

Another issue has to do with the name on the left side, for example "Guy Gardner." is to high on Mac but centered (mostly) on PC.

```.topbarname {
    padding: 50px 0px;
    z-index: 2;
    position: relative;
    display: inline-block;
    letter-spacing: 0px;
    margin-left: 120px;
}```

(I don't prefer using absolute/relative positioning, someone else wrote this code, but I did confirm this was not the issue)

I attempted media queries, but this isn't a browser size issue (I thought it was initially). I found it was only affecting Mac users.

CodePudding user response：

I found the solution to the issue at hand. First, I did need to apply a CSS reset. I needed to do this because chrome has a default 8px margin. It took some time to realize that this margin was not displaying on chrome in mac for some reason. I used this reset and studied what each element was doing before applying it: https://github.com/necolas/normalize.css/blob/master/normalize.css

Secondly, I found that there was also an issue with the way the line-height was being rendered with the particular font being used on the website (even though the reset did apply a 1.15 line-height fix as well). As a result it caused space at the top of the font in the PC version of Chrome while it did not render in the Mac version of chrome. This, ironically caused an 8px difference, which lead me to believe it to be a default margin issue, even after I had applied the margin reset to the html/body.

To fix the font issue I ran the font through a web font generator that converts system font for web font use, and made sure to select the "Fix vertical metrics" option which erases the extra line-height space. Transfonter was the site I used to do that: https://transfonter.org

If anyone has anything else to add that I may have missed, please let me know, but these steps fixed my problem. Thank you.

When looking at inconsistent OS or browser issues, remember to check your font and the line-height.