From 27a99b19e842055b869cb5e99f66b4b1e4688780 Mon Sep 17 00:00:00 2001 From: Ram Lmn Date: Fri, 21 Apr 2017 21:39:05 +0530 Subject: [PATCH] Use local fonts and stop scrollable elements from repainting (#2266) --- app/assets/stylesheets/components.scss | 1 + app/assets/stylesheets/fonts/montserrat.scss | 1 + app/assets/stylesheets/fonts/roboto-mono.scss | 1 + app/assets/stylesheets/fonts/roboto.scss | 78 ++++++++++--------- 4 files changed, 44 insertions(+), 37 deletions(-) diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 765b43f93..2fdbde513 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -1052,6 +1052,7 @@ a.status__content__spoiler-link { overflow-y: scroll; overflow-x: hidden; flex: 1 1 auto; + backface-visibility: hidden; -webkit-overflow-scrolling: touch; &.optionally-scrollable { diff --git a/app/assets/stylesheets/fonts/montserrat.scss b/app/assets/stylesheets/fonts/montserrat.scss index 680e84670..8705b3fa9 100644 --- a/app/assets/stylesheets/fonts/montserrat.scss +++ b/app/assets/stylesheets/fonts/montserrat.scss @@ -1,5 +1,6 @@ @font-face { font-family: 'Montserrat'; + src: local('Montserrat'); src: font-url('montserrat/Montserrat-Regular.eot'); src: font-url('montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), font-url('montserrat/Montserrat-Regular.woff2') format('woff2'), diff --git a/app/assets/stylesheets/fonts/roboto-mono.scss b/app/assets/stylesheets/fonts/roboto-mono.scss index 52c78fa99..f46ce6b68 100644 --- a/app/assets/stylesheets/fonts/roboto-mono.scss +++ b/app/assets/stylesheets/fonts/roboto-mono.scss @@ -1,5 +1,6 @@ @font-face { font-family: 'Roboto Mono'; + src: local('Roboto Mono'); src: font-url('roboto-mono/robotomono-regular-webfont.eot'); src: font-url('roboto-mono/robotomono-regular-webfont.eot?#iefix') format('embedded-opentype'), font-url('roboto-mono/robotomono-regular-webfont.woff2') format('woff2'), diff --git a/app/assets/stylesheets/fonts/roboto.scss b/app/assets/stylesheets/fonts/roboto.scss index 64d7bf899..fc62869d4 100644 --- a/app/assets/stylesheets/fonts/roboto.scss +++ b/app/assets/stylesheets/fonts/roboto.scss @@ -1,48 +1,52 @@ @font-face { - font-family: 'Roboto'; - src: font-url('roboto/roboto-italic-webfont.eot'); - src: font-url('roboto/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'), - font-url('roboto/roboto-italic-webfont.woff2') format('woff2'), - font-url('roboto/roboto-italic-webfont.woff') format('woff'), - font-url('roboto/roboto-italic-webfont.ttf') format('truetype'), - font-url('roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg'); - font-weight: normal; - font-style: italic; + font-family: 'Roboto'; + src: local('Roboto'); + src: font-url('roboto/roboto-italic-webfont.eot'); + src: font-url('roboto/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'), + font-url('roboto/roboto-italic-webfont.woff2') format('woff2'), + font-url('roboto/roboto-italic-webfont.woff') format('woff'), + font-url('roboto/roboto-italic-webfont.ttf') format('truetype'), + font-url('roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg'); + font-weight: normal; + font-style: italic; } @font-face { - font-family: 'Roboto'; - src: font-url('roboto/roboto-bold-webfont.eot'); - src: local('Roboto bold'), local('roboto-bold'), - font-url('roboto/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'), - font-url('roboto/roboto-bold-webfont.woff2') format('woff2'), - font-url('roboto/roboto-bold-webfont.woff') format('woff'), - font-url('roboto/roboto-bold-webfont.ttf') format('truetype'), - font-url('roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg'); - font-weight: bold; - font-style: normal; + font-family: 'Roboto'; + src: local('Roboto'); + src: font-url('roboto/roboto-bold-webfont.eot'); + src: local('Roboto bold'), local('roboto-bold'), + font-url('roboto/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'), + font-url('roboto/roboto-bold-webfont.woff2') format('woff2'), + font-url('roboto/roboto-bold-webfont.woff') format('woff'), + font-url('roboto/roboto-bold-webfont.ttf') format('truetype'), + font-url('roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg'); + font-weight: bold; + font-style: normal; } @font-face { - font-family: 'Roboto'; - src: font-url('roboto/roboto-medium-webfont.eot'); - src: font-url('roboto/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'), - font-url('roboto/roboto-medium-webfont.woff2') format('woff2'), - font-url('roboto/roboto-medium-webfont.woff') format('woff'), - font-url('roboto/roboto-medium-webfont.ttf') format('truetype'), - font-url('roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg'); - font-weight: 500; - font-style: normal; + font-family: 'Roboto'; + src: local('Roboto'); + src: font-url('roboto/roboto-medium-webfont.eot'); + src: font-url('roboto/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'), + font-url('roboto/roboto-medium-webfont.woff2') format('woff2'), + font-url('roboto/roboto-medium-webfont.woff') format('woff'), + font-url('roboto/roboto-medium-webfont.ttf') format('truetype'), + font-url('roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg'); + font-weight: 500; + font-style: normal; } @font-face { - font-family: 'Roboto'; - src: font-url('roboto/roboto-regular-webfont.eot'); - src: font-url('roboto/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'), - font-url('roboto/roboto-regular-webfont.woff2') format('woff2'), - font-url('roboto/roboto-regular-webfont.woff') format('woff'), - font-url('roboto/roboto-regular-webfont.ttf') format('truetype'), - font-url('roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'Roboto'; + src: local('Roboto'); + src: font-url('roboto/roboto-regular-webfont.eot'); + src: font-url('roboto/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'), + font-url('roboto/roboto-regular-webfont.woff2') format('woff2'), + font-url('roboto/roboto-regular-webfont.woff') format('woff'), + font-url('roboto/roboto-regular-webfont.ttf') format('truetype'), + font-url('roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg'); + font-weight: normal; + font-style: normal; }