1

There's a very strange problem that i am facing in a webpage that i am designing. It's plain HTML and CSS and i am trying to create an animation at the bottom of each anchor element. All are of equal width of 25% since i am using a grid system but the lines underneath the anchor elements are showing a strange behavior where some of the lines are smaller in height than the others even though i've given equal height to all the anchor elements. A fixed height of lets say 3px works perfectly fine when given to the before element. It's the 5% value that's causing this and i have no idea why.

The screenshot of what's happening with the a elements

.three-columns
{
    width: 25%;
}
a.listings
{

  font-family: "Consolas", 'Roboto', 'Open Sans', sans-serif;
  text-decoration: none;
  display: inline-block;
  height: 100%;
  padding: 2.5%;
  margin-bottom: 5%;
  transition: color 0.5s 0s;
  position: relative;
}

a.listings::before
{
  content: '';
  position: absolute;
  background: green;
  height: 5%;
  bottom: 0;
  left: 0;
  right: 100%;
  -webkit-transition: right 0.5s;
  transition: right 0.5s;
}

a.listings:hover::before
{
  right: 0;
}

three-columns is the div that contains the a elements with the class of listings

<div class="three-columns">
    <a class="listings" href="#">dd</a>
</div>

Also, when i inspect my code in Chrome and set the size to 1366 x 768 which is also the size of my laptop screen, it looks okay. As soon as i close the inspector and come back to the real size, it starts behaving as it shows in the screenshot i attached.
Edit: Okay no, even the inspector shows that same behavior now

yourAverageDeveloper
  • 385
  • 3
  • 13
  • Probably a rounding issue, as you have paddings of `2.5%` – Michel Jun 18 '18 at 15:01
  • thanks for the reply but removing the padding didn't solve it – yourAverageDeveloper Jun 18 '18 at 15:05
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Jun 18 '18 at 15:05
  • Percentage heights do not work the way you think they will. Strongly suggest using `vw` and `vh` units instead. – random_user_name Jun 18 '18 at 15:09
  • actually it was the vw units that started this :P then i moved to percentages – yourAverageDeveloper Jun 18 '18 at 15:11
  • It is a rounding issue. See [this question](https://stackoverflow.com/questions/9635347/fixing-sub-pixel-rounding-issue-in-a-css-fluid-grid). Add `float:none;overflow: hidden;` to the `a.listing` style and it is gone. – Michel Jun 18 '18 at 15:11
  • i added those but nothing changed. It's the same in all the browsers that i have – yourAverageDeveloper Jun 18 '18 at 15:16
  • You're right. In Firefox it was gone. Now tested it in Chrome and IE11 and it's still there. In Safari then again it works, in Opera it doesn't... – Michel Jun 18 '18 at 15:19
  • The same code that's causing this problem works perfectly fine when i inspect it and set the width to 1366px which is the same as the width of my screen and force the hover class on. I don't know why it's there and as soon as i inspect, it's gone. – yourAverageDeveloper Jun 18 '18 at 15:25
  • okay, no. Now even the inspector shows that inconsistency – yourAverageDeveloper Jun 18 '18 at 15:40
  • The only way to solve this is to set a fixed `height` in `a.listings::before`. If I set it to `height:2px` the problems are gone in all browsers. – Michel Jun 18 '18 at 16:08
  • This is [an old post](http://cruft.io/posts/percentage-calculations-in-ie/), but it still is an issue apparently... – Michel Jun 18 '18 at 16:11
  • So I noticed that changing the number of rows seems to affect this behavior. Also, if you drop it down to 1% the variation becomes very clear. Here's a fiddle: https://jsfiddle.net/gf476cyq/5/ – Ryan Gibbs Jun 18 '18 at 18:21
  • Michel yes i mentioned that in the original post but that's not gonna be helpful for devices that go over 3000px in width...i am scaling the font sizes with increasing widths and that's gonna make that fixed height look very small..i'll check that post out and thank you very much for helping me out..At least i know that i didn't do anything super stupid – yourAverageDeveloper Jun 18 '18 at 19:25
  • That's an awesome discovery Ryan...and i DO have a lot of rows on that webpage like over 26 i think so that may be causing the problem... – yourAverageDeveloper Jun 18 '18 at 19:26

0 Answers0