desktopBackgroundImage render issue in electron two package structure #75

PitterL · 2019-02-19T02:23:06Z

Hi, Myxvisual:

Problem description

I use the two package.json structure suggested of electron(https://www.electron.build/tutorials/two-package-structure
), i found the desktopBackgroundImage couldn't be rendered out.

Link to minimal working code that reproduces the issue

I use the default example:

export default class AppUWP extends React.Component {
  render() {
    return (
      <UWPThemeProvider
        theme={getTheme({
          themeName: "dark", // set custom theme
          accent: "#0078D7", // set accent color
          useFluentDesign: true, // sure you want use new fluent design.
          desktopBackgroundImage: require("./components/images/blurBackground/jennifer-bailey-10753.jpg") // set global desktop background image
        })}
      >
        <MyComponent />
      </UWPThemeProvider>
    )
  }
}

And get the result in html:
For two package structure:

<div class="fluent-background-1745310480" style="position: fixed; z-index: -1; top: 0px; left: 0px; width: 100%; height: 100%; background: url(&quot;http://localhost:3000/63dd844671a9043144eea6a44690a067.jpg&quot;) left top / cover no-repeat fixed; pointer-events: none;"></div>

There is not background, but when i manually enter the address(http://localhost:3000/63dd844671a9043144eea6a44690a067.jpg) in explorer, there will the picture shown out.

For one package structure:

<div class="fluent-background-3658378926" style="position: fixed; z-index: -1; top: 0px; left: 0px; width: 100%; height: 100%; background: url(&quot;/static/media/jennifer-bailey-10753.63dd8446.jpg&quot;) left top / cover no-repeat fixed; pointer-events: none;"></div>

the background work normal.

Versions

React-UWP: 1.2.31
React: 16.1.1
Browser:

two package structure:
https://github.com/mjangir/reactron

one package structure:
https://github.com/csepulv/electron-with-create-react-app

I trace the code to react-uwp/theme/index.js
at Theme.prototype.render function , there createElement("theme-root") element and set "desktopBackground" to backgroundStyle.background, i want to understand how how the framework render the background that i could do further debug?

thanks

PitterL · 2019-02-21T16:21:57Z

Get the answer,
This issue is not directly caused by UWP but referred to UWP structure. In UWP the desktopBackgroundImage coded as the a tag

with CSS, this tag is sibling node of the app root node, not the child of the app root node. So we could see:

<body>
<div id="app">...</div>
<div class="fluent-background-1745310480" style=...></div>
</body>

The background div is controlled by CSS syntax z-index, there set to -1, that means put to bottom:

.fluent-background-1745310480 {
  position: fixed;
  z-index: -1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url(http://localhost:3000/63dd844671a9043144eea6a44690a067.jpg) no-repeat fixed top left / cover;
  pointer-events: none;
}

But there may some global CSS attribute for root app, like here in my used boilerplate:

  #app {
    background-color: #fafafa;
    min-height: 100%;
    min-width: 100%;
  }

You could see it's not used the z-index to control. And unfortunately, there the default z-index value will be defined to auto, that means start from last number(That's ZERO). So the z-index number in app root is ZERO and z-index in background is -1. That caused app root color cover the whole background image. We couldn't see the background image insight.

PitterL changed the title ~~desktopBackgroundImage render issue in~~ desktopBackgroundImage render issue in two package structure Feb 19, 2019

PitterL changed the title ~~desktopBackgroundImage render issue in two package structure~~ desktopBackgroundImage render issue in electron two package structure Feb 19, 2019

PitterL closed this as completed Feb 21, 2019

PitterL mentioned this issue Feb 21, 2019

Compatible issue in global-styles setting mjangir/reactron#7

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

desktopBackgroundImage render issue in electron two package structure #75

desktopBackgroundImage render issue in electron two package structure #75

PitterL commented Feb 19, 2019 •

edited

Loading

PitterL commented Feb 21, 2019 •

edited

Loading

desktopBackgroundImage render issue in electron two package structure #75

desktopBackgroundImage render issue in electron two package structure #75

Comments

PitterL commented Feb 19, 2019 • edited Loading

Problem description

Link to minimal working code that reproduces the issue

Versions

PitterL commented Feb 21, 2019 • edited Loading

PitterL commented Feb 19, 2019 •

edited

Loading

PitterL commented Feb 21, 2019 •

edited

Loading