CODEWITHSUNDEEP
htmlcss
Kaya Toast
Kaya Toast

Reputation: 5503

Difference in element height between Chrome and Safari rendering

enter image description here

In the above image, Chrome is on the left and Safari is to the right. The wrapper (green) element in my code is being rendered with different heights in Chrome and Safari.

Other similar questions on stackoverflow direct to this stackoverflow question/answer. I applied the solution given there and added specific heights to all elements and made them display: flex.

What do I need to do to make the wrapper element to be rendered with the same height across Chrome and Safari ?

.block, .level-1, .super-wrapper, .wrapper, .wrapper-initial, .initial {
    display: flex;
    justify-content: center;
    align-items: center;
}
.block {
    border: 1px solid #c4c4c4;
    height: 2em;
    width: 4em;
}
.level-1 {
    height: 3em;
}
.super-wrapper {
    height: 3em;
    font-size: 0.4em;
}
.wrapper {
    background-color: #8fbc8f;
    height: 3em;
    width: 3em;
}
.wrapper-initial {
    height: 2em;
}
.initial {
    height: 2em;
}
<div class="block">
    <div class="level-1">
        <div class="super-wrapper">
            <div class="wrapper">
                <div class="wrapper-initial">
                    <div class="initial">X</div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 1187

Answers (2)

Zac
Zac

Reputation: 1532

The problem is in using em without unifying the base (resetting), if you checked the computed styles tab in DevTools, you'll find that font-size: 0.4em; is computed to different px values,

You don't want to use px and still want to use em? you just can add:

html {
  font-size: 16px; // or any value you want!
}


html {
  font-size: 16px;
}

.block, .level-1, .super-wrapper, .wrapper, .wrapper-initial, .initial {
    display: flex;
    justify-content: center;
    align-items: center;
}
.block {
    border: 1px solid #c4c4c4;
    height: 2em;
    width: 4em;
}
.level-1 {
    height: 3em;
}
.super-wrapper {
    height: 3em;
    font-size: 0.4em;
}
.wrapper {
    background-color: #8fbc8f;
    height: 3em;
    width: 3em;
}
.wrapper-initial {
    height: 2em;
}
.initial {
    height: 2em;
}
<div class="block">
    <div class="level-1">
        <div class="super-wrapper">
            <div class="wrapper">
                <div class="wrapper-initial">
                    <div class="initial">X</div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

swift-lynx
swift-lynx

Reputation: 3765

The problem is that Safari and Chrome use different font sizes for your elements. When you use em, it scales to the current element's font size.

To fix your problem, make sure that the element's font size is the same in every browser, or use rem as a unit instead. rem always uses the root font size of the document.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Upvotes: 1

Related Questions