Skip to content

Commit

Permalink
#14: safari iframe fix - documentation update
Browse files Browse the repository at this point in the history
  • Loading branch information
MartijnCuppens committed Jul 17, 2018
1 parent 2352863 commit 27c5ef7
Showing 1 changed file with 10 additions and 6 deletions.
16 changes: 10 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,16 @@ No extra classes are generated.
*Default value: `false`*


### Safari iframe resize bug fix <sub><sup>(boolean)</sup></sub> ###
> **SCSS, Sass & Stylus:** `$rfs-safari-iframe-resize-bug-fix`
> **Less:** `@rfs-safari-iframe-resize-bug-fix`
> **PostCSS:** `safariIframeResizeBugFix`
Safari doesn't resize its font-size in an iframe if the iframe is resized. To fix this `min-width: 0vw` can be added and that's what happens if this option is enabled. See (#14)[https://github.com/project-rfs/rfs/issues/14].

*Default value: `false`*


## !important
By setting a second parameter to true, `!important` is added after the font-size value. (Example is in `scss`)

Expand All @@ -187,12 +197,6 @@ CSS:
}
```

## Known issues
Safari doesn't recalculate the value of `vw` in a calc()-function for font-sizes in iframes if the min-width, max-width or width is not set in vw after the iframe is resized (edge case, but this is the case for Codepen demo's). Adding this line will solve this (dirty fix):
```css
_::-webkit-full-page-media, _:future, :root * {min-width: 0vw;}
```

## Best practices
- Remember to set RFS on your font size of your `html` or `body` (especially if the minimum font size is lowered), otherwise some text may not dynamically rescale. Note that setting RFS on `html` can influence the value of `rem`.
- Always set your line-heights relative (in `em` or unitless).
Expand Down

0 comments on commit 27c5ef7

Please sign in to comment.