search

aurelia / templating

An extensible HTML templating engine supporting databinding, custom elements, attached behaviors and more.
MIT License
116 stars 104 forks source link

Upgrading electron caused <compose> to hide other parts of UI #689

Closed anthonyborell closed 4 years ago

anthonyborell commented 4 years ago

I'm submitting a bug report

Library Version: aurelia-templating 1.10.3

Please tell us about your environment:

Operating System: Windows 10 1903

Node Version: 12.13.0

NPM Version: 6.12.0

Webpack Version 4.38.0

Browser: Electron 7.3.3 Chromium 78.0.3904.130

Language: TypeScript 3.5.3

Current behavior:

After upgrading my Electron app from 3.0.2 to 7.3.3, pages/views which have<compose> elements hide other parts of the UI.

Originally I thought this might of been a CSS issue, however the pages with the <compose> elements on them are the only ones affected. No code was changed besides upgrading electron.

How the UI should look: toolbar, sidebar, content image

The page with the <compose> element hides the toolbar image

Setting the container of the <compose> element to display: none; image

Toolbar is visible again: image

Expected/desired behavior:

<compose> elements work as they previous did, but I'm not entirely sure it's a <compose> issue.

Solution

I solved it by changing

<compose view-model="./xyz"></compose>

to this

<div as-element="compose" view-model="./xyz"></div>
bigopon commented 4 years ago

@anthonyborell can you help paste some template html here? and the final rendered html as well? It's quite hard to guess what is rendered and what's not based on just a few lines of html

anthonyborell commented 4 years ago

@bigopon The vagueness was due to this being propitiatory software. However I will do my best to help you as much as I can. I am going to try and recreate the bug outside of the code base.

anthonyborell commented 4 years ago

Upon further investigation, the problem isn't related to <compose>. Between Electron 3.0.2 and 7.3.3, the behaviour of CSS overflow has changed. There also seems to be issues with Chromium's implementation of flexbox and overflow since v72 The reason it only affected the pages with the <compose> elements were because those pages had content that exceeded the containers height.

bigopon commented 4 years ago

I remember having these issues in one of my apps as well, and it was painful to resolve. Thanks for the updates.