2

Edit #3 - Question rewritten

Issue: border width of anchor tags unexpectedly increase on mouseover when a:hover css selector is used.

Question: Is this a Firefox bug or a CSS behavior I am unaware of?

  1. Requires Firefox 57.0.0 - 57.0.2
  2. Adjust browser page size to 2,000+ pixels.
  3. Run code snippet.
  4. Increase and decrease the width of the browser page using the two-headed horizontal arrow cursor.
  5. Hover your mouse over the link and you will see the border width increase from 1px to 1.11667px.

a:hover {}

a {
  border: 1px solid #000;
}
<a href="#">Link</a>

Original Question

This does not happen on Chrome or Firefox 50.0.0 and 56.0.2.

To test this you'll need:

  • Firefox 57.0.0 - 57.0.2 (the latest version on Dec 13th, 2017).
  • A large screen around 2,000 pixels.

If your screen isn't that big, you can press cmd - to zoom out. If you're not sure how big your screen is, you can use Firefox's page rulers.

Issue

I've created a js fiddle. Move the vertical column separating the JavaScript and rendered output as far to left as it goes. Make the browser window as wide as you can, and zoom out if you need to. Click Run. Move your mouse over the yellow boxes and take note that nothing happens.

Now, resize the width of the browser window, making it smaller and larger. Hover over the boxes again and you'll see they start moving. For some reason, Firefox is changing the border width from 1px to 1.66667px.

I've found the a:hover CSS selector is causing this issue. If you read the comments in the js fiddle, even just putting an empty a:hover {} in the CSS will cause the issue. I cannot remove the a:hover line from the CSS on our website, unfortunately. I realize I can use outlines instead of borders to fix the rendering issue.

My question is whether this is a Firefox bug or something I don't know about the a:hover selector and borders?

Edit: The desired behavior is for the borders to not change their width.

Edit #2: A simpler js fiddle.

Katrina
  • 1,922
  • 2
  • 24
  • 42
  • Questions seeking debugging help ("**why isn't this code working?**") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. Questions without a **clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – j08691 Dec 13 '17 at 15:49
  • @j08691 The desired behavior is for the borders to not change their width, since no CSS or JS in my code is changing them. This issue only happens on a specific Firefox version, with a very large screen size, and after resizing the screen. I tried to make it as short, while also clear, as possible. – Katrina Dec 13 '17 at 15:53
  • My point with the previous comment was that you need to include a [mcve] in your question. – j08691 Dec 13 '17 at 15:58
  • 1
    Looks like a bug in latest Firefox, had similar issue a couple of days ago. – S1awek Dec 13 '17 at 16:02
  • @j08691 I see your point, but don't think it was worth voting to close it. I've updated my answer with the desired behavior and a simpler js fiddle. Not sure I could've made the instructions all that much shorter though. – Katrina Dec 13 '17 at 16:08
  • 1
    Don't focus on the description, focus on adding a [mcve] to your question and not making us reliant upon jsFiddle – j08691 Dec 13 '17 at 16:11
  • @j08691 I've updated the question by rewriting the question. Let me know if that isn't suitable. – Katrina Dec 13 '17 at 17:03

0 Answers0