c-smile / sciter-sdk

Sciter is an embeddable HTML/CSS/scripting engine
http://sciter.com
Other
2.11k stars 223 forks source link

css rules cause hang on linux gtk #126

Closed adabru closed 5 years ago

adabru commented 5 years ago

Hi, I get a 100% CPU hang when I use some specific html-file.

System: linux gtk x64 (ArcoLinuxD rolling release).

Create file ui/main.htm with following content:

<html>
  <head>
    <style>
      .h30 { height: 30px; }
      .floatleft { float: left; }
      *::after { box-sizing: border-box; }
    </style>
  </head>
  <body>
    <div class="h30">
      <div class="floatleft"></div>
      div element
    </div>
    <a class="h30">
      <div class="floatleft"></div>
      a element
    </a>
  </body>
</html>

Create file main.cpp with content copied from https://sciter.com/hello-cpp-tutorial/

Issue visible in usciter:

# bash
wget https://github.com/c-smile/sciter-sdk/archive/master.zip
unzip master.zip
sciter-sdk-master/bin.gtk/x64/usciter ui/main.htm

Open ui/main.htm in usciter, hover mouse over the text a little bit, program gets stuck on 100% CPU usage and no responsiveness.

Alternatively, issue visible in compiled program:

# bash
export SCITERSDK="$PWD/sciter-sdk-master"
export PATH="$PATH:$SCITERSDK/bin.gtk/x64"
cp $SCITERSDK/include/sciter-gtk-main.cpp .
cp $SCITERSDK/bin.gtk/x64/libsciter-gtk.so .
packfolder ui resources.cpp -v "resources"

g++ -I"$SCITERSDK/include" $(pkg-config --cflags gtk+-3.0) sciter-gtk-main.cpp main.cpp -o a.out -L. -lsciter-gtk -ldl $(pkg-config --libs gtk+-3.0)
LD_LIBRARY_PATH=. ./a.out

Hover mouse over the text a little bit, program gets stuck on 100% CPU usage.

The html file is a MWE extracted from a css-design-template I downloaded.

c-smile commented 5 years ago

Problem indeed.

Thanks for the sample, Adam.

Just in case use of floats for layout purposes in modern CSS is "considered harmful".

In Sciter use

body { flow:horizontal; } 

if you want blocks inside body to be replaced in horizontal row.

Yet *::after { box-sizing: border-box; } (all elements are getting additional not-so-pseudo-element) is murky at best. Anyway box-sizing is not supported by Sciter - no need for that.

adabru commented 5 years ago

The mentioned downloaded css-template wasn't fun to work with in other areas either (unrelated to sciter) and I rewrote the template. As you mention working with floats is considered bad practice, I wouldn't mind you closing this issue as won't fix.