Border Disappears on Zoom Out/in In all Browser - html

Question

I am working on a project with different browsers.
I am having a table with borders and when I zoom out my page border disappears.
This happens in all browsers like IE, EDGE, and Chrome Browser.
Is it the DOM structure problem?
It needs to supports with zoom level 75% to 125%. To be specific set zoom to 67% in Chrome and see the change
Please provide the possible solution to this question.
.mEditor {
display: flex;
border-bottom: 1px solid #d7d7d7;
}
.m-label {
width: 30%;
display: flex;
background-color: #f2f2f2;
}
.m-editor-noc {
flex: 1;
display: flex;
background-color: #FFFFFF;
border-left: 1px solid #d7d7d7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mfEditor {
display: flex;
flex: 1 0 auto;
}
.mEditor-li {
vertical-align: middle;
border-left: 1px solid #d7d7d7;
height: 18px;
display: inline-block;
margin-top: 3px;
}
.mEditor .tEditor {
border: none;
flex: 1;
padding-right: 6px;
}
<div class="m-group">
<div id="id251" class="mEditor">
<div class="m-label">
<label for="id223" title="Address">Address</label>
</div>
<div class="m-editor-noc">
<div id="id252" class="mfEditor">
<input type="text" class="tEditor" value="Address" name="" id="id223" maxlength="255" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id254" class="mEditor">
<div class="m-label">
<label for="id224" title="Address 2">Address 2</label>
</div>
<div class="m-editor-noc">
<div id="id255" class="mfEditor">
<input type="text" class="tEditor" value="16" name="" id="id224" maxlength="30" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id257" class="mEditor">
<div class="m-label">
<label for="id225" title="Postcode">Postcode</label>
</div>
<div class="m-editor-noc">
<div id="id258" class="mfEditor">
<input type="text" class="tEditor" value="Post Code" name="" id="id225" maxlength="10" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id25a" class="mEditor ">
<div class="m-label">
<label for="id20f" title="City">City</label>
</div>
<div class="m-editor-noc">
<div id="id25b" class="mfEditor">
<input type="text" class="tEditor" value="City" name="" id="id20f" autocomplete="off" maxlength="50" tabindex="0">
</div>
<div class="editor-links">
</div>
</div>
</div>
<div id="id25d" class="mEditor">
<div class="m-label">
<label for="id228" title="District">District</label>
</div>
<div class="m-editor-noc">
<div id="id25e" class="mfEditor">
<input type="text" class="tEditor" value="" name="" id="id228" maxlength="100" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id260" class="mEditor ">
<div class="m-label">
<label for="id210" title="Country">Country</label>
</div>
<div class="m-editor-noc">
<div id="id261" class="mfEditor">
<input type="text" class="tEditor" value="Country" name="" id="id210" autocomplete="off" maxlength="50" tabindex="0">
</div>
<div class="editor-links">
</div>
</div>
</div>
</div>

Answer 1

If by "We supporting all browser and Zoom level 75% - 125%" you mean you want a border to have the same size in actual pixels regardless of zoom level, you're out of luck. It's not technically possible.
You should only develop for zoom level of 100%.
There is no reliable cross-browser method to know the zoom level, which means this information is not available inside your Window object, so you can't use it to adjust values of properties on your elements.
As a fallback, you could just make the border thicker, so it will be visible even when zoomed. Now it's not displayed because it probably gets a sub-pixel size and estimated by the browser into non-renderable.
Do note everything you that's rendered at zoom levels other than 100% is entirely at the whim of how each browser internally chooses to estimate and render, which you:
have no control on
could change without notice.
In other words, your initial statement should have a minor footnote:
* Within reasonable limits. Rendering while zoomed is browser dependent.

Answer 2

I encountered a similar issue with border disappearing. This answer was extremely helpful to me. Draw borders by pseudo-elements. The solution for your case could be like:
.mEditor {
display: flex;
/*border-bottom: 1px solid #d7d7d7; <- REMOVE */
position: relative; /* <- ADD */
}
.mEditor::after{ /* <- ADD */
content: "";
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
border-bottom: 1px solid #d7d7d7;
}
.m-label {
width: 30%;
display: flex;
background-color: #f2f2f2;
}
.m-editor-noc {
flex: 1;
display: flex;
background-color: #FFFFFF;
/*border-left: 1px solid #d7d7d7; <- REMOVE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative; /* <- ADD */
}
.m-editor-noc::after{ /* <- ADD */
content: "";
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
border-left: 1px solid #d7d7d7;
}
.mfEditor {
display: flex;
flex: 1 0 auto;
}
.mEditor-li {
vertical-align: middle;
border-left: 1px solid #d7d7d7;
height: 18px;
display: inline-block;
margin-top: 3px;
}
.mEditor .tEditor {
border: none;
flex: 1;
padding-right: 6px;
}
<div class="m-group">
<div id="id251" class="mEditor">
<div class="m-label">
<label for="id223" title="Address">Address</label>
</div>
<div class="m-editor-noc">
<div id="id252" class="mfEditor">
<input type="text" class="tEditor" value="Address" name="" id="id223" maxlength="255" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id254" class="mEditor">
<div class="m-label">
<label for="id224" title="Address 2">Address 2</label>
</div>
<div class="m-editor-noc">
<div id="id255" class="mfEditor">
<input type="text" class="tEditor" value="16" name="" id="id224" maxlength="30" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id257" class="mEditor">
<div class="m-label">
<label for="id225" title="Postcode">Postcode</label>
</div>
<div class="m-editor-noc">
<div id="id258" class="mfEditor">
<input type="text" class="tEditor" value="Post Code" name="" id="id225" maxlength="10" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id25a" class="mEditor ">
<div class="m-label">
<label for="id20f" title="City">City</label>
</div>
<div class="m-editor-noc">
<div id="id25b" class="mfEditor">
<input type="text" class="tEditor" value="City" name="" id="id20f" autocomplete="off" maxlength="50" tabindex="0">
</div>
<div class="editor-links">
</div>
</div>
</div>
<div id="id25d" class="mEditor">
<div class="m-label">
<label for="id228" title="District">District</label>
</div>
<div class="m-editor-noc">
<div id="id25e" class="mfEditor">
<input type="text" class="tEditor" value="" name="" id="id228" maxlength="100" tabindex="0">
</div>
<div class="editor-links"></div>
</div>
</div>
<div id="id260" class="mEditor ">
<div class="m-label">
<label for="id210" title="Country">Country</label>
</div>
<div class="m-editor-noc">
<div id="id261" class="mfEditor">
<input type="text" class="tEditor" value="Country" name="" id="id210" autocomplete="off" maxlength="50" tabindex="0">
</div>
<div class="editor-links">
</div>
</div>
</div>
</div>