search

AlexTorresDev / custom-electron-titlebar

Custom electon title bar inpire on VS Code title bar
MIT License
868 stars 149 forks source link

CSS pseudo classes stopped working #113

Closed Track-tor closed 2 years ago

Track-tor commented 3 years ago

Bug Description: When I set a custom title bar on a window most CSS pseudo classes stop working.

Steps to reproduce the behavior:

  1. Set any window with a custom title bar.
  2. Assign a pseudo class style in CSS (like :hover).
  3. Try to activate the event.
  4. See that the style is not applied.

Expected behavior: In the case of :hover the style should be applied when the mouse is hovering over the item, but the style is not being applied. This only happens when I include my 'titlebar.js' script inside a view of my project.

I haven't tested it, but I suspect that almost all mouse related events are not working properly.

Screenshots: Button being hovered: image

Expected style when hovered (applied by dev-console): image

titlebar.js: image

app.css: image

main.html: image

Desktop:

Track-tor commented 3 years ago

After some tinkering I managed to find what was causing this issue: The '.container-after-titlebar' element was covering the whole window, basically taking a height of 100%.

So, I basically 'solved' this problem by modifying the class and overwriting the height to be 0. IDK if this will mess with anything from the library, but for now it'll do.

SeYoungKim commented 3 years ago

I faced the same problem and found the reason why it happens:

<div class="container-after-titlebar"> element should have been loaded after "DOMContentLoaded" event.

take a look at this example:

https://github.com/AlexTorresSk/custom-electron-titlebar/blob/0e61605cae6b7721c04ef7f5ed68c9c64e1346e4/example/preload.js

Then, <div class="container-after-titlebar"> element can wrap the other elements in <body> element.

I think it would be great to explain(warn) this in the document.