position: fix 没用?你大概是被 transform 坑了

在 CSS 里很多位置布局都是相对于容器的。但是 position: fixed; 比较直白,只相对于窗口,通常不会被干扰。但是我最近就遇到了这么个问题:

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

这不对呀,我明明写的是 position: fixed; 为啥没用呢?

于是我一个一个翻看父元素的 CSS 布局属性,发现一个 Modal 库有个奇怪的 transform: scale(1); 。这个属性没有任何视觉的效果,显然是动画执行之后留下的。然而在技术实现上,即使是 scale(1)translateX(0) 这种没有任何效果的 transform ,也会重建一个坐标系,导致内部元素的 position:fixed 不再相对于窗口,而是相对于这个 transform 元素。

这是不是某个浏览器实现的缺陷呢?实际测试 Firefox 和 Chrome 都是一样的效果。这也许是一个 Web 标准中比较含糊的灰色区域。

解决方法比较简单粗暴,把 transform: scale(1) 改成 transform: unset 即可。在实践中,尽量避免对比较大的容器使用 transform,比如 Sidebar 和 Modal。如果要用的话,则要确保子元素不会用到 position: fixed,比如一些 Popup。

从扩张到裁员:一家芬兰设计公司的挣扎

2020 这个数字显得很特别,新年的时候人们抱有极大的期待。登陆火星,5G 网络,人工智能,量子碰撞之类的大饼刚画了一半,我们才发现这一年的主角只有冠状病毒。

继续阅读 →

Web 内嵌字体格式

简而言之,WOFF2 是你唯一需要的字体格式。如果你需要支持 IE11,那么就加上 WOFF 作为备用字体格式。

@font-face {
  font-family: 'Source Code Pro';
  font-weight: 400;
  font-style: normal;
  src: local('Source Code Pro'),
    url('source-code-pro-regular.woff2') format('woff2');
}
继续阅读 →

芬兰永久居留许可

相比工作居留许可,永久居留许可有更多优势:不需要续签,不需要工作证明,可以更加灵活地旅行。

继续阅读 →

芬兰电子身份认证

当你在芬兰居住并注册社保号(Social Security Number)之后,各个公共系统里就已经自动为你创建了账号。这些系统包括:移民局系统,警察局系统,医疗系统,税务系统,社保系统(Kela),邮政系统(Posti)等。这些系统都有网络服务,但是你需要特殊的电子身份认证(e-Idenfication)才能注册使用。

继续阅读 →

Arabia 姆明系列

姆明 Moomin 系列卡通形象可以说是芬兰输出全球最多的文化符号了。衍生周边产品众多,各个年龄段的人都喜欢,非常适合送礼物或自家用。

继续阅读 →

比较 HTML 和 JavaScript Input 验证

如果你想验证表单输入是否有效,比如你想让输入框只接受整数,而不是小数或文字,在 HTML5 中你可以用以下代码轻松实现:

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

但是,用户仍然可以输入无效信息:

  1. 在 Firefox 里,你可以输入任何字符:比如“fsielfs”。
  2. 在 Chrome 里,你可以输入一些无效的数字:比如“1..2.2.2”。
继续阅读 →

芬兰住宅保险

居住在 HOAS 和 AYY 的学生房的同学是不需要住宅保险 Home Insurance 的,可以暂时先不用看这篇文章了。如果毕业准备找房,可以一看。

继续阅读 →

芬兰税卡详解

每年新年前后,在芬兰的同学们都会收到一封来自 VERO (芬兰税务局)的信。这封信里面就是税卡以及税率的解释。很多同学都有疑问:

  1. 为什么我没有收入还会收到税卡?
  2. 为什么我的税率和别人的不一样?
  3. 为什么我的税率这么高?
  4. 为什么我的税率额这么高?

这篇文章将解答这些问题。

继续阅读 →

Btrfs 断电损坏

强制关机是危险的,至少对于 Btrfs 文件系统来说。

即使如今 Linux 桌面的稳定性已经极大改善,使用滚动发行版或特殊显卡驱动的用户仍然可能会遇到系统卡死的情况。这时候很多人就会直接长按电源键关机。这会导致系统强制断电,而文件系统读写尚未完成(可能是文件系统层面,也可能是存储硬件层面)。

为什么偏偏 Btrfs 会特别敏感呢?

其实 Btrfs 本身并没有特别弱势的地方,但是使用 Btrfs 的发行版,比如 openSUSE,会定期进行 btrfs-balance 和 btrfs-cleaner。这些 Btrfs 维护任务会带来巨大的 CPU 和 IO 负担,让桌面更容易卡死崩溃。假如你正在玩一款特别占用资源的游戏,而这时 btrfs-balance 开始了,系统很可能会被卡死。如果此时强制断电,btrfs-balance 的数据转移就会被中断,从而使文件系统处于异常状态。

再次开机时,则可能会遇到无法挂载分区,无法进入系统,甚至无法启动的情况。通常系统的 /home 分区或子卷读写最频繁,也最容易因为断电而损坏。无法挂载 /home 分区或子卷的表现为:能进入登录界面却无法进入桌面。

这时要怎么做呢?

第一,重启后即使无法进入系统,也请先让机器继续运行。这可以让 SSD 硬件断电保护机制工作,将之前未完成的数据操作恢复,这可能需要几分钟。请尽量等待时间长一些,以确保数据写入已经完全完成。

第二,再次重启。如果第一步有效,那么您应该能够正常进入系统了。您可以多试几次。如果最终仍然不能进入系统,那么您还需要检查和修复 Btrfs 文件系统。

第三,制作救援盘,从救援盘启动。

第四,插入移动硬盘,使用 btrfs restore 将数据恢复出来。这一步是完全安全的,不会更改已有文件系统。接下来的步骤都或多或少有些风险,因此建议您先保留数据。

第五,按照维基上的 Btrfs 修复教程操作。需要注意的是,这些修复方法的风险依次增大。某些情况下,btrfs check --repair /dev/sda1 甚至可能会完全摧毁一个 Btrfs 文件系统。