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

[gerges-zz]

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

Expected behavior

Title bar should not be invisible

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]

👋 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-zz]

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]

Similar happens with frame: false:

[mdeboer]

@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]

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:

electron/atom/browser/native_window_mac.mm

Lines 1666 to 1717 in 68d35db

	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]

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:

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]

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

[sallar]

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

[CodingMeSwiftly]

@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 --

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

[sallar]

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

[CodingMeSwiftly]

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

[mdeboer]

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

[sbward]

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

[tborychowski]

@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? :-)

[CodingMeSwiftly]

@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]

any update on this?

still experiencing transparent bar in macOS 10.13.2

[mdeboer]

@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]

Anyone... Bueler...

[igor10k]

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]

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]

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]

Proposed fix is up 👍 #11886