Guo Yunhe

position: fix not working? Check transform

In CSS, many position/layout properties are context-aware. For example, position: absolute; only works if the desired parent has position: related/absolute/fixed;. However, position: fixed; is very simple. It is always related to window, barely affected by parent container. But, I stuck in this small issue:

transform:scale(1);
position:fixed; right:10px; bottom:10px;

This is strange, I have position: fixed; but why it doesn't work?

So I checked its parent elements one by one and found the modal library left a transform: scale(1);. It doesn't make any visual difference and seems a side effect of animation. In browsers' implementation, even if scale(1) and translateX(0) don't make any sense, the transform property will recreate a coordinate system. As result, position:fixed of inner elements will not be related to window, but the transform element.

The solution is simple, change transform: scale(1) to transform: unset. In practice, avoid using transform in large containers, like a sidebar or modal. If you need it, make sure here is no position: fixed inside, such as some popups.

2020年 6月 9日 | Comments

Integrate Crowdin To RetroArch

RetroArch project uses *.h files to store translation strings. Here aren't any tools to make the translation process easier. When source strings changed, you have to manually review the changes, locate and update translation strings. It is a hard work. As a big fan of RetroArch, I was thinking if it can be improved with modern i18n platforms.

Continue reading →

2020年 3月 28日 | Comments

HTML vs. JavaScript Input Validation

If you want to validate a form input and so it only accepts integers, here is an easy way in HTML5:

<input type="number" pattern="[0-9]*" />

However, users can still type something invalid:

  1. In Firefox, you can basically type anything, like "fsielfs".
  2. In Chrome, you can type numbers with dots, like "1..2.2.2".
Continue reading →

2020年 1月 13日 | Comments

Code Journey #11

Highlights for the last month: HiDPI bug fixes and emulator packaging.

KDE:

  • Kompare HiDPI [patch]
  • Filelight HiDPI [patch]
  • KSysGuard HiDPI, except the sensor graphy [patch]
  • Font manager HiDPI [patch]
  • enablefont and disablefont icon for font manager [patch]
  • KWallet HiDPI [patch]
  • KWin HiDPI [patch]
  • Krita splash screen HiDPI [patch]
  • Kate/KonsolePart dual screen rendering issue [bug] [patch]
  • Spectale Dual Screen issue [bug] [patch]

openSUSE:

  • Update python-PyMuPDF package and fix linking issue
  • Update arcanist package and submit to Factory [request]
  • Submit PCSX2 package to Factory [request]
  • Update retroarch package to work out-of-box [request 1] [request 2]
  • Create retroarch-assets package [request]
  • Create retroarch-joypad-autoconfig package [request]
  • Create libretro-core-info package [request]
  • Create libretro-database package [request]
  • Create libretro-mame2000 core package [request]
  • Create libretro-genesis-plus-gx core package [request]
  • Create libretro-flycast core package [request]
  • Create libretro-yabause core package [request]

2019年 10月 2日 | Comments

openSUSE Conference 2019 @Nuremberg

Participating openSUSE Conference is one of my dream. I always cannot find a time to do it until I made my mind to leave all other stuff. Thank my company for sponsoring my flight.

Munich Central Station

I have visited Munich for many times. It is familiar place but the memory is so far and mixed with smiles and tears. Feel a bit sad.

The conference started at 10am. When I arrived Nuremburg by train, it already afternoon.

Here we are
Like these lovely houses

The city is not big. Streets are wide, straight and clean, so I can easily find my way. I think when I retired, I will look for a similar place for the rest of my life.

Beer garden and geeks' talking
Tech report

It is a three day event. Everyday here are tech talks, mostly about containers, Kubernetes. I am not interested in though… There are also some tough topic, like the plan of openSUSE Foundation (SUSE doesn't seem liking the idea…).

Funny things:

  1. openSUSE and Fedora sponsor each other. Fedora developers made a GitLab replacement and even made a demo for openSUSE.
  2. Kernel of Leap and SLE is old. They need to backport new kernel patches. And the amount is tens of thousands. Usually you apply patches in a sequence. But they find a way to parallel apply patches in several seconds.
  3. A few openSUSE's servers run Fedora and Debian.
Lounge
Summer feeling!
The long table meeting

It is interesting that someone recognized I made the opi tool. Also met a few friends from Japan. We talked online about font packaging. It is a unique experience to meet people in offline events. Taiwan friends stayed in the same hotel as me. So we get more chance to talk.

The most exciting part is to find QR code hidden in the square. Each gives you a link to a question. And you need 8/10 point to get a Gecko.

Catch a Geeko

Get to know many people. Drink non-alcohol beer. Exchange coins and bank notes.

Some cool guy's phone running Sailfish OS
Christian and me work on Wiki together for a long time
Chairman is also a fan of zoo

I enjoy it so much!

2019年 9月 12日 | Comments

Code Journey #10

KDE:

  • Fixed JuK folder dialog always open on start
  • Translate tech base
  • POTD doesn't change daily
  • Bluetooth headset not detected when auto connect. Identify it as Linux kernel bug. Report to upstream

openSUSE:

  • Update Wiki FAQ page, still in progress
  • Chameleon theme: new navbar and footer design
  • Chameleon theme: dark mode
  • Apply theme to doc.opensuse.org
  • Update wiki theme

2019年 9月 11日 | Comments

Code Journey #8

openSUSE

Wiki

  • Update FAQ pages

Plasma theme

  • Update openSUSE color scheme
  • Improve panel transparency

opi

  • Fix system version number space issue in Leap 15.1

Geeko Store

  • OBS/PMBS search API integration
  • RPM package listing

Packaging

  • Update php-composer
  • Create npm2rpm
  • Packaging npmjs-gulp-cli
  • Packaging npmjs-create-react-app
  • Packaging npmjs-webpack-cli
  • Update patterns-base, remove dejavu-fonts recommendation，to improve emoji support

KDE

Translation

  • KDE Connect

2019年 6月 26日 | Comments