CSS hover has effect on a wrong node
Reported by
cyril.au...@gmail.com,
Mar 9 2018
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36 Example URL: https://jsfiddle.net/rndjj34x/6/ Steps to reproduce the problem: 1. https://jsfiddle.net/rndjj34x/6/ 2. hover the last (3rd) button 3. the second button gets the hover styling What is the expected behavior? The second button should not be hovered What went wrong? The second button gets hovered after hovering the 3rd one Probbly because the 3rd / last one is disabled Does it occur on multiple sites: N/A Is it a problem with a plugin? N/A Did this work before? N/A Does this work in other browsers? Yes Chrome version: 65.0.3325.146 Channel: stable OS Version: Flash Version: Works on Firefox
,
Mar 9 2018
Bisect info: 323957 (good) - 323960 (bad) https://chromium.googlesource.com/chromium/src/+log/66a82b0b..0ca23022?pretty=fuller In r323960 ="Roll src/third_party/WebKit" suspecting fad16c87b98ad5bc86713b55b2a354419d6786a1 "Button elements are clipping overflow by default" Landed in 44.0.2359.0 The workaround is to explicitly hide the overflow via "button {overflow: hidden}" Can't say if this is the intended behavior but the reported case looks like a bug in Chrome.
,
Mar 9 2018
,
Mar 11 2018
Thanks, we used overflow: hidden for now hope it'll be fixed, since it crops the text if the fonts don't exist (not great for a11y)
,
Mar 12 2018
This is reproducible even if we replace <button> with <span>.
,
Mar 12 2018
This might be the hit testing for the SVG content. I'll look to see if it happens with other content in the third button.
,
Mar 12 2018
Just to make sure, I think the problem is that the <span class="material-icons MuiIcon-root-32">edit_icon</span> has 'edit_icon' as child text node, this is transformed by the material-ui font, but on Chrome it still spans over its right sibling, and :hover effect still work (I don't know which of Chrome and Firefox has the right behavior there) Interestingly on Firefox, if you remove <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> the 'edit_icon' text is cropped, so I guess the overflow: hidden way is just what they did |
||||
►
Sign in to add a comment |
||||
Comment 1 by cyril.au...@gmail.com
, Mar 9 2018after testing this class, applied on 3rd element .MuiButtonBase-disabled-18 { cursor: default; pointer-events: none; } is causing the issue on Chrome