search

jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
49.13k stars 3.95k forks source link

html.has-navbar-fixed-top cannot use rem relative to html itself #1485

Open Gerhut opened 6 years ago

Gerhut commented 6 years ago

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version 0.6.1 My browser is: Safari 11 This is a Sass issue: I'm using version 0.6.1 I am sure this issue is not a duplicate.

Description

Using rem on html tag can only relative to browser default html font-size(16px).

Setting font-size of html tag can not affect rem value set on itself.

Although it is a browser bug, move .has-navbar-fixed-top to body will be a workaround.

Steps to Reproduce

  1. Set $body-size to 14px
  2. Use an .is-fixed-top navbar with .has-navbar-fixed-top html

Expected behavior

Both .navbar's min-height and html.has-navbar-fixed-top's padding-top are 45.5px (=3.25rem * 14px)

Actual behavior

.navbar's min-height is 45.5px while html.has-navbar-fixed-top's padding-top is 52px (= 3.25rem * 16px)

jgthms commented 6 years ago

Mmmh that's good shout. The padding could be applied to body instead.