Html element top position varies on high resolution and device pixel ratio

user_5266895 0
Viewed 179

i need to position 2nd element is next to the first element.So i set top value as 100%. the starting point of 2nd element is varies when device pixel ratio as 1.5.

Machine : Lenovo YOGA 500, Scale : 150%, Resolution: 1920 * 1080, Browser: Except Firefox

.wrap {
    background-color: #fff;
    border: 1px solid #ef36d8;
    position: absolute;
    top: 70px;
}

.content {
    width: 100px;
    height: 100%;
    padding: 5px;
}

div {
    box-sizing: border-box;
}

.arrow {
    position: absolute;
    width: 16px;
    height: 8px;
    left: 50px;
    top: 100%;
    background-color: #fff;
    border: 1px solid #ef36d8;
    border-top: 1px solid #fff;
}
<div class="wrap">
  <div class="content">Content area</div>
  <div class="arrow"></div>
</div>

this issue occurs only when device pixel ratio as 1.5.

the arrow class element start position varies based on device pixel ratio.i need to remove border top of red highlighted element

error image

Kindly guide me any solution on this?

Thanks is advance

screen-resolution css html javascript
1 Answers

Definitely an interesting problem. The only way I was able to remove that extra line was to have another, slightly smaller div box within the arrow:

HTML

<div class="wrap">
  <div class="content">Content area</div>
  <div class="arrow"></div>
  <div class="secondary-arrow"></div>
</div>

CSS

.wrap {
    background-color: #fff;
    border: 1px solid #ef36d8;
    position: absolute;
    top: 70px;
}

.content {
    width: 100px;
    height: 100%;
    padding: 5px;
}

div {
    box-sizing: border-box;
}

.arrow {
    position: absolute;
    width: 16px;
    height: 8px;
    left: 50px;
    top: 100%;
    background-color: #fff;
    border: 1px solid #ef36d8;
    border-top: 1px solid #fff;
}

.secondary-arrow {
    position: absolute;
    width: 14px;
    height: 7px;
    left: 51px;
    top: 100%;
    background-color: #fff;
}
user_14309250
Related