New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hiddenInset and vibrancy cause a invisible/low-alpha titlebar on 10.13 #10521

Closed
gerges opened this Issue Sep 14, 2017 · 22 comments

Comments

Projects
None yet
@gerges
Copy link

gerges commented Sep 14, 2017

  • Electron version: 1.7.6
  • Operating system: MacOS High Sierra GM

Expected behavior

Title bar should not be invisible

screen shot 2017-09-14 at 11 22 04 am

Actual behavior

Title bar is invisible

How to reproduce

  mainWindow = new BrowserWindow({
      vibrancy: 'light',
      titleBarStyle: 'hiddenInset',
      width: 800,
      height: 600
  })
 $ git clone git@github.com:gerges/electron-quick-start.git -b  issue/invisible-titlebar
 $ npm install
 $ npm run start
@welcome

This comment has been minimized.

Copy link

welcome bot commented Sep 14, 2017

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

@gerges

This comment has been minimized.

Copy link

gerges commented Sep 14, 2017

2017-09-14 11:21:50.732 Electron[25825:1762070] *** WARNING: Textured window <AtomNSWindow: 0x7fd0d4e75f80> is getting an implicitly transparent titlebar. This will break when linking against newer SDKs. Use NSWindow's -titlebarAppearsTransparent=YES instead.

I think we may want to explicitly set titlebarAppearsTransparent to NO in this case?

@juliangruber

This comment has been minimized.

Copy link
Member

juliangruber commented Sep 26, 2017

Similar happens with frame: false:

screen shot 2017-09-26 at 11 54 52

screen shot 2017-09-26 at 11 54 51

@mdeboer

This comment has been minimized.

Copy link

mdeboer commented Sep 26, 2017

@gerges I get the same warning here, digging in the code now and my eye spotted this: https://github.com/electron/electron/blob/1-7-x/atom/browser/native_window_mac.mm#L922

So my guess is that adding something like this at line 895 would fix it:

// Explicitely don't make titlebar transparent by default
if (base::mac::isAtLeastOS10_10()) {
  [window_ setTitlebarAppearsTransparent:NO];
}

But I don't know, never touched Objective C / Xcode before so don't look at me 😆 Attempting to build the 1.7.x branch now with my change to see if it works.

Same issue with Electron 1.6.9 (which Atom uses currently) by the way.

Update: Alright it takes me took long to build (or to figure out how to) as I need to install the 10.10 SDK from Xcode 6.3 first to get it to build as far as I know. So if someone with a bootstrapped environment could test this, that would be awesome.

@gnattu

This comment has been minimized.

Copy link

gnattu commented Oct 2, 2017

It seems like the reason is not related to setTitlebarAppearsTransparent because you have to set this value to true so that the title bar will no longer cover the contents beneath it. As far as I concern, the actual reason is that Apple change the behavior of NSFullSizeContentViewWindowMask which was used to draw vibrancy effect under the titlebar region. Without that mask the titlebar area will also become totally transparent in an earlier version of macOS release, which is same as the behavior on High Sierra. NSFullSizeContentViewWindowMask is considered deprecated by Apple in the latest 10.13 SDK, and it no longer draws vibrancy effect under the titlebar area. Apple encourages to use contentLayoutRect or contentLayoutGuide instead.

Update

After digging up deeper with the electron implementation as well as playing with the native swift code with Xcode, I found that the NSFullSizeContentViewWindowMask is somehow still working in the latest SDK, if used properly. I'm able to create a full content-sized, hidden title-bar vibrancy window with Xcode by setting the size of NSVisualEffectView to the window size manually, it turns out that the window size that electron is getting is wrong on High Sierra.

To be specific:

NSVisualEffectView* effect_view = (NSVisualEffectView*)vibrant_view;
if (effect_view == nil) {
effect_view = [[[NSVisualEffectView alloc]
initWithFrame: [[window_ contentView] bounds]] autorelease];
[window_ setVibrantView:(NSView*)effect_view];
[effect_view setAutoresizingMask:NSViewWidthSizable | NSViewHeightSizable];
[effect_view setBlendingMode:NSVisualEffectBlendingModeBehindWindow];
[effect_view setState:NSVisualEffectStateActive];
[[window_ contentView] addSubview:effect_view
positioned:NSWindowBelow
relativeTo:nil];
}
NSVisualEffectMaterial vibrancyType = NSVisualEffectMaterialLight;
if (type == "appearance-based") {
vibrancyType = NSVisualEffectMaterialAppearanceBased;
} else if (type == "light") {
vibrancyType = NSVisualEffectMaterialLight;
} else if (type == "dark") {
vibrancyType = NSVisualEffectMaterialDark;
} else if (type == "titlebar") {
vibrancyType = NSVisualEffectMaterialTitlebar;
}
if (base::mac::IsAtLeastOS10_11()) {
// TODO(kevinsawicki): Use NSVisualEffectMaterial* constants directly once
// they are available in the minimum SDK version
if (type == "selection") {
// NSVisualEffectMaterialSelection
vibrancyType = static_cast<NSVisualEffectMaterial>(4);
} else if (type == "menu") {
// NSVisualEffectMaterialMenu
vibrancyType = static_cast<NSVisualEffectMaterial>(5);
} else if (type == "popover") {
// NSVisualEffectMaterialPopover
vibrancyType = static_cast<NSVisualEffectMaterial>(6);
} else if (type == "sidebar") {
// NSVisualEffectMaterialSidebar
vibrancyType = static_cast<NSVisualEffectMaterial>(7);
} else if (type == "medium-light") {
// NSVisualEffectMaterialMediumLight
vibrancyType = static_cast<NSVisualEffectMaterial>(8);
} else if (type == "ultra-dark") {
// NSVisualEffectMaterialUltraDark
vibrancyType = static_cast<NSVisualEffectMaterial>(9);
}
}
[effect_view setMaterial:vibrancyType];
}

You will be able to let the vibrancy effect cover the titlebar area by changing window_ contentView to [window_ contentView] superview, like this

 if (effect_view == nil) {
    effect_view = [[[NSVisualEffectView alloc]
        initWithFrame: [[[window_ contentView] superview] bounds]] autorelease];
    [window_ setVibrantView:(NSView*)effect_view];

    [effect_view setAutoresizingMask:NSViewWidthSizable | NSViewHeightSizable];
    [effect_view setBlendingMode:NSVisualEffectBlendingModeBehindWindow];
    [effect_view setState:NSVisualEffectStateActive];
    [[[window_ contentView] superview] addSubview:effect_view
                           positioned:NSWindowBelow
                           relativeTo:nil];
  }

But by doing this will cause the app to terminate after seconds of running as it conflicts with apple's policy to not attach a view directly to NSView and this is not the solution to the issue. It just proves that the region of window_ contentView is now excluding the titlebar area (at least for the NSVisualEffectView) and not equals to the whole window-size which it should get.

@gnattu

This comment has been minimized.

Copy link

gnattu commented Oct 3, 2017

Some good news and bad news:
I managed to make the vibrant titlebar working (at least on my machine), as well as get the rounded corner under webview back(#10522). But another High Sierra related bug has been located: the window controller(traffic lights) will get covered by webview. Check the images below:

screen shot 2017-10-03 at 13 32 13

screen shot 2017-10-03 at 13 32 23

screen shot 2017-10-03 at 13 34 56

I also found that the customButtonOnHover which does not have a titlebar at all, which means it does not affected by the low alpha titlebar issue, also have its button covered by webview. I think both could be webview-related, have to dig deeper.

@mdeboer

This comment has been minimized.

Copy link

mdeboer commented Oct 3, 2017

Making good progress there @gnattu, thank you so much!

@sallar

This comment has been minimized.

Copy link

sallar commented Oct 4, 2017

@gnattu Finally someone that looks into this. Thank you.

@ImJCabus

This comment has been minimized.

Copy link

ImJCabus commented Nov 3, 2017

@gnattu I've also looked at the code but you seem to have dug deeper already so I'll put my hopes on you for this :). I noticed that toggling fullscreen once seems to solve both the transparent titleBar and rounded corners issues. I hope this hint helps you. Thanks

-- Update --

screen shot 2017-11-04 at 12 33 03

I also don't see the overlapping traffic lights issue. Running macOS 10.13.1

@sallar

This comment has been minimized.

Copy link

sallar commented Nov 8, 2017

@ImJCabus Are you saying the issue has been resolved in 10.13.1?

@ImJCabus

This comment has been minimized.

Copy link

ImJCabus commented Nov 8, 2017

@sallar No. The issue is still there. However, toggling fullscreen (green traffic lights icon) once resolves it.
@tborychowski macOS 10.13.1

@mdeboer

This comment has been minimized.

Copy link

mdeboer commented Nov 8, 2017

@ImJCabus I can confirm this works with Atom 👍 Glad you found a workaround until it's fixed.

@sbward

This comment has been minimized.

Copy link

sbward commented Dec 15, 2017

@ImJCabus Your workaround doesn't work for me, unfortunately.

@tborychowski

This comment has been minimized.

Copy link

tborychowski commented Dec 15, 2017

@ImJCabus yes, this works in principle.
But how would you implement that in practice?

  • either toggling the fullscreen programmatically - which looks weird
  • or asking the user to do this manually? :-)
@ImJCabus

This comment has been minimized.

Copy link

ImJCabus commented Dec 15, 2017

@sbward Hmm. I haven't looked into this for a while now. Maybe electron had an update that killed the "workaround"?
@tborychowski Yea it's not really a workaround... With toggling fullscreen you can at least see the layout correctly while developing. However, toggling programmatically or asking the user to do so is not really feasible 😄 (1 star ratings incoming 🙈 ). I haven't found a solution to this, sadly. To be honest, I just stumbled across this while playing around with electron for the first time. If you are on a schedule and need to deliver some real app to your users, I'm sorry to say you might be out of luck for this issue and you'd have to strip the vibrancy until this is fixed.

@everdrone

This comment has been minimized.

Copy link

everdrone commented Jan 9, 2018

any update on this?

still experiencing transparent bar in macOS 10.13.2

@mdeboer

This comment has been minimized.

Copy link

mdeboer commented Jan 15, 2018

@ImJCabus though I haven tried. I suppose if you're on a deadline and need to deliver you can always implement a look-a-like toolbar and set the real toolbar as hidden.

@archae0pteryx

This comment has been minimized.

Copy link

archae0pteryx commented Jan 19, 2018

Anyone... Bueler...

@Igor10k

This comment has been minimized.

Copy link

Igor10k commented Feb 4, 2018

Adding transparent: true to the BrowserWindow settings fixes the transparent bar bug but you'll end up with no rounded corners at the top bug that is described here #10522

@tommoor

This comment has been minimized.

Copy link
Member

tommoor commented Feb 6, 2018

Surprised this bug isn't higher priority for a fix considering it makes both frameless and vibrant windows unusable on macOS and affects a bunch of atom themes 😔

@tommoor

This comment has been minimized.

Copy link
Member

tommoor commented Feb 10, 2018

I know it's not a lot but I added a $300 bounty to the issue if it helps anyone find the time to have a go at fixing this. 😄

https://www.bountysource.com/issues/49338524-hiddeninset-and-vibrancy-cause-a-invisible-low-alpha-titlebar-on-10-13

@MarshallOfSound

This comment has been minimized.

Copy link
Member

MarshallOfSound commented Feb 11, 2018

Proposed fix is up 👍 #11886

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment