Bug 166618 – Reflow on hover: http://jsbin.com/dogoveziji/edit?html,css,output

• Component: DOM
• Status: RESOLVED INVALID

Created attachment 297847 [details]
This is how it looks in Firefox

Chrome and Opera do not reflow as expected on the hover state of an element (Demo: http://jsbin.com/dogoveziji/edit?html,css,output)


The browser where the problem appears 
1) navigator.userAgent 
Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

WebKit Version =>537.36


2) Windows and Linux platforms were tested

[Alexey Proskuryakov]

I just opened the test page in Chrome 55.0.2883.95, and it looks the same as the attached screenshot. Could you please clarify what the problem is?

Also, please note that Chromium has forked WebKit years ago, so this issue may or may not occur in modern WebKit.

Created attachment 298475 [details]
The behavior in Chrome

Created attachment 298476 [details]
Behavior in Firefox

Above I have attached 2 files to demonstrate the problem I am encountering.

The situation is the following: 
1) instead of using <table> tag to display the tabular data, we are using divs with display properties of "table" and "table-row" , "table-cell" accordingly. (this is done in order to achieve the fixed header effect)
2) it is needed that border-bottom change color when the user hovers over the row (that's where the issue in Chrome appears, as when moving the mouse from top to bottom the border-bottom color does not change, and when going from bottom up - it starts acting weird)
3) In order to make border change color on hover state, I use the following CSS rule (*ISSUE)
el:hover{
     border-bottom-color: blue;
}
4)This is how I currently avoid that problem (*WORKAROUND)
el:hover{
     border: 1px solid blue;
     border-left:none;
     border-right:none;
   }




The problem appears in Chrome/55.0.2883.87. I would be glad to test it in Chrome 55.0.2883.95 (but as far as I could understand that version of Chrome is the current stable for MacOS, and I am using Windows)

Should I rather report the issue to the Chrome browser developers? 
(The reason I reported it here was that the reflow problem occurred not only in Chrome but also in Opera )

[Alexey Proskuryakov]

Thank you! I cannot reproduce this in Safari, so it must be a bug that is specific to chromium - either fixed in WebKit after chromium forked, or introduced there after the fork.