Hyper: Lost rounded corners on macOS High Sierra

[kajka]

Hi there!

After updating the system to 10.13 High Sierra appeared a problem with the application window. The application window looks fine with the default theme:

However, when I'm apply my theme, the Hyper window loses its rounded corners:

Here is also my theme: https://gist.github.com/kajka/b8bd99c07e788b14f68954ca883c9e69
I use it as local plugin.

---

OS: macOS 10.13 High Sierra
Hyper version: 1.4.8/2.0.4
My config file: https://gist.github.com/kajka/d333f948c65177a6300a25eb3425e427

[rohmanhm]

Hi, I'm using Ubuntu 16.04 and didn't get rounded border too.

[albinekb]

@rohmanhm are you not getting them with Hyper on stable(1.4.x) and/or canary(2.x.x)?

[rohmanhm]

@albinekb Yeah. It's so sharp for me.

Ubuntu 16.04
Hyper 2.0.4 (stable)

[markozxuu]

@albinekb @kajka I just updated to the version of mac os high sierra, but this problem does not present it . As you can see there are rounded corners🤔

NOTE: Hyper Canary version 2.0.4
@rohmanhm I'll take a look at your problem.

[ideaweb]

For me its broken with blurred background in High Sierra e.g. with "hyper-transparent > View > Vibrancy > Dark" or with "hyper-simple-vibrancy".

[kajka]

@MAPESO I have no idea what happened to my theme or configuration file (like I said they work completely fine on previous version of macOS; I noticed now that I did not have in config file line that corresponding to channel update before; I can only suspect that the line appeared after updating to the Canary version).

I modified my theme based on the theme created by @henrikdahl . Now everything works fine.

Theme file looks like so: https://gist.github.com/kajka/9e00fbfc787cc05d032e7d2cd443b4b6

OFFTOPIC
I also managed to fix bug (described here: https://github.com/henrikdahl/hyper-statusline/issues/61 ) that occurred at the beginning of branch 1.4 and the hyper-statusline plug-in. I moved the plugin to the local directory and downloaded the necessary modules (tildify after-all-results) into the node_modules directory. For a reason unknown to me, the plugin does not work properly when it is in the node_modules directory.

[albinekb]

If I'm reading this correct, you mean that this is no issue with 2.0 (rounded corners) and was just a config issue? So we can close this one? 🙉 @kajka

But @ideaweb you are still experiencing problems with rounded corners together with ´hyper-transparent`? Maybe this has to do with the same config/theme error? 🤔

[markozxuu]

@albinekb This was setup error, we can rule out that this error does not belong to Hyper 2.0.3 or 1.4.7

I just need some time to discard the error an Ubuntu:grinning:

[ideaweb]

Currently i have no idea, i just updated to High Sierra with same config and then I noticed that rounded corners are gone. I updated 1.4 to 2.0 in hope that it helps, but this is not true. For me its not a big issue, only nice2have.

[kajka]

@albinekb @ideaweb No it wasn't config issue. My old theme still does not work properly. I had to rewrite it. As you can see above, many people also have this problem (check @ideaweb posts). On MacOS Sierra everything worked excellently.

My problem with the configuration file was that missing comma (again thank you @albinekb for help). I have not modified the configuration file since version 1.2. It seems to me that the missing comma is due to an upgrade to Canary 2.0.x (Hyper must add some line into config file about the update channel).

[albinekb]

I understand now @kajka @ideaweb, thanks for clarifying 👍 It's a general issue with rounded corners & High Sierra, that this issue tracks.

[kajka]

@albinekb That's correct.

[markozxuu]

@ideaweb You can try this theme: hypermaterial-vibrancy

I need to rule out that the problem is the theme 😄

[mdeboer]

I tried it with my fork of a theme hyperterm-dark-fusion-vibrancy where I implemented vibrancy and it causes the same problem.

[markozxuu]

@rohmanhm Hyper is built on electron, and electron uses the native look of operating system windows. That's why you cannot see rounded edges as in macOS 💔

[markozxuu]

@mdeboer Could you tell me your version of Hyper and operating system?

NOTE: When the theme is applied the rounded edges are lost.

[markozxuu]

@albinekb I just tried this _hyper-transparent topic in the hyper_ version 2.0.4

and I return to the subject by defectto. With this we can confirm that the plguin is incompatible with version 2.0.4

@ideaweb apparently this plugin is incompatible with version 2.0.4
if you want to get a transparency effect I recommend this plguin: hyper-firewatch or hyperterm-dark-fusion-vibrancy

[rohmanhm]

@MAPESO but all my app is rounded, also chrome.

Look that rounded

[rohmanhm]

Compared Google Chrome and Hyper.

[markozxuu]

@rohmanhm I did the tests on my computer but I got the same effect as yours

[markozxuu]

@rohmanhm I do not know how it is that chrome causes the effect of rounded edges. But we will investigate the problem 😸

[mdeboer]

@MAPESO I use High Sierra but on your screenshot you don't have rounded corners either 😉 The issue might be related to Electron though, at least if it's related to vibrancy. I modded Atom to use vibrancy and it's also square.

I'll play with the theme some more, I've been working on so many things I'm afraid I'll mix em up 😉

[markozxuu]

@mdeboer My wallpaper has confused me, I thought the edges were rounded 😅
for the next I will do the tests on a white background : )

[ideaweb]

I tested "hyperterm-dark-fusion-vibrancy" and rounded corners are gone too.

Same for hyper-firewatch.

Without both plugins rounded corners are back.

[mdeboer]

It is because the HTML canvas doesn't have rounded corners, you can see it when you open the developer tools in the elements tab and hover the html node. I think setting the border-radius to 5px would give more or less the same look.

I'm not sure of the inner workings of electron but maybe setting a overflow: hidden like option would fix it as well?

[albinekb]

The problem with that @mdeboer is that transparency is not supported in windows (without disabling gpu acceleration), same for most linux distros..

[mdeboer]

@albinekb vibrancy is a MacOS only function but as this also happens with non-transparent themes, this issue has nothing to do with transparency.

[mdeboer]

@MAPESO check out this issue in the electron repo: https://github.com/electron/electron/issues/8305

[markozxuu]

@mdeboer Thanks for the info : )

[riccardolardi]

Still no way to get rounded corners with vibrancy on MacOS High Sierra?

[mdeboer]

@alberto2000 see the electron issue linked above, hasn't been fixed yet and rounded corners are not working yet. This is likely a bug in electron and not a bug in hyper 😉

[controversial]

This is fixed for me on the macOS 10.14 Mojave beta