search

jarek-foksa / xel

Xel - Widget toolkit for building native-like Electron and Web apps
https://xel-toolkit.org
Other
691 stars 59 forks source link

Visual glitch in Accordion with Material Theme #53

Closed cjgriscom closed 6 years ago

cjgriscom commented 6 years ago

I am experiencing a visual bug with my Drawer/Accordion configuration. It seems applicable only to the Material stylesheet. When the page loads, the carat symbol jumps out of frame, but snaps into place once the user interacts with it.

The below animation shows the bug occurring in an Electron app: xelbug

The bug also occurs in the attached HTML document running in Chromium. xelbugchrome

My Chromium version is: Version 63.0.3239.84 (Developer Build) (64-bit) Electron version v1.6.15

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bug Report</title>
    <link rel="stylesheet" href="node_modules/typeface-noto-sans/index.css">
    <link rel="stylesheet" href="node_modules/typeface-roboto-mono/index.css">
    <link rel="stylesheet" href="node_modules/typeface-roboto/index.css">
    <link rel="stylesheet" href="node_modules/xel/stylesheets/material.theme.css">
    <script src="node_modules/xel/xel.min.js"></script>
  </head>
  <body>
    <div id="app">
      <x-drawer id="drawer">
        <x-accordion>
            <header>
              <x-label>Accordion1</x-label>
            </header>
            <main>
            <x-label>Chrome Example</x-label>
                <x-input value="Accordion1"></x-input>
                <x-button>
                <x-label>Button</x-label>
                </x-button>
            </main>
        </x-accordion>
        <hr>
      </x-drawer>
      <h1>Bug Report</h1>
      <x-box>
        <x-progressbar></x-progressbar>
        <x-button onclick="document.querySelector('#drawer').opened = true" id="button_drawer">
            <x-label>Open</x-label>
        </x-button>
      </x-box>
    </div>
  </body>
</html>
jarek-foksa commented 6 years ago

Can you reproduce this issue with Xel 0.0.82?

cjgriscom commented 6 years ago

It appears to be fixed! Thank you for your quick response.

jarek-foksa commented 6 years ago

BTW, keep in mind I might deprecate <x-drawer> in favor of the standard <dialog> in near future.