Bug 166618 - Reflow on hover: http://jsbin.com/dogoveziji/edit?html,css,output
Summary: Reflow on hover: http://jsbin.com/dogoveziji/edit?html,css,output
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: Other
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2016-12-29 23:14 PST by 039706
Modified: 2017-01-10 17:07 PST (History)
2 users (show)

See Also:


Attachments
This is how it looks in Firefox (8.02 KB, image/png)
2016-12-29 23:14 PST, 039706
no flags Details
The behavior in Chrome (251.94 KB, image/gif)
2017-01-10 09:54 PST, 039706
no flags Details
Behavior in Firefox (283.02 KB, image/gif)
2017-01-10 09:55 PST, 039706
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description 039706 2016-12-29 23:14:27 PST
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
Comment 1 Alexey Proskuryakov 2017-01-02 18:54:48 PST
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.
Comment 2 039706 2017-01-10 09:54:31 PST
Created attachment 298475 [details]
The behavior in Chrome
Comment 3 039706 2017-01-10 09:55:10 PST
Created attachment 298476 [details]
Behavior in Firefox
Comment 4 039706 2017-01-10 10:21:08 PST
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 )
Comment 5 Alexey Proskuryakov 2017-01-10 17:07:43 PST
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.