Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix font fallback Safari 10 for iOS #402

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+44 −5
Open

Fix font fallback Safari 10 for iOS #402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8972026
Added mock font measuring for Safari 10 with fallback bug
dengjeffrey May 7, 2018
cb19ba4
Added iOS safari 10 match
dengjeffrey May 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/core/fontwatcher.js
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,14 @@ goog.scope(function () {
if (FontWatcher.SHOULD_USE_NATIVE_LOADER === null) {
if (!!window.FontFace) {
var match = /Gecko.*Firefox\/(\d+)/.exec(FontWatcher.getUserAgent());
var safari10Match = /OS X.*Version\/10\..*Safari/.exec(FontWatcher.getUserAgent()) && /Apple/.exec(FontWatcher.getVendor());
var appleMatch = /Apple/.exec(FontWatcher.getVendor())
var safari10Match = /OS X.*Version\/10\..*Safari/.exec(FontWatcher.getUserAgent()) ||
/AppleWebKit\/603/.exec(FontWatcher.getUserAgent()) ||
/AppleWebKit\/602/.exec(FontWatcher.getUserAgent())

if (match) {
FontWatcher.SHOULD_USE_NATIVE_LOADER = parseInt(match[1], 10) > 42;
} else if (safari10Match) {
} else if (appleMatch && safari10Match) {
FontWatcher.SHOULD_USE_NATIVE_LOADER = false;
} else {
FontWatcher.SHOULD_USE_NATIVE_LOADER = true;
Expand Down
42 changes: 39 additions & 3 deletions src/core/fontwatchrunner.js
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ webfont.FontWatchRunner = function(activeCallback, inactiveCallback, domHelper,
*/
webfont.FontWatchRunner.LastResortFonts = {
SERIF: 'serif',
SANS_SERIF: 'sans-serif'
SANS_SERIF: 'sans-serif',
MOCK_FONT: 'FontWatchRunnerMockFont'
};

/**
Expand Down Expand Up @@ -70,7 +71,7 @@ goog.scope(function () {

/**
* Returns true if this browser is WebKit and it has the fallback bug
* which is present in WebKit 536.11 and earlier.
* which is present in WebKit 602.*, 603.* ,and 536.11 and earlier
*
* @return {boolean}
*/
Expand All @@ -81,7 +82,9 @@ goog.scope(function () {
FontWatchRunner.HAS_WEBKIT_FALLBACK_BUG = !!match &&
(parseInt(match[1], 10) < 536 ||
(parseInt(match[1], 10) === 536 &&
parseInt(match[2], 10) <= 11));
parseInt(match[2], 10) <= 11) ||
parseInt(match[1], 10) === 602 ||
parseInt(match[1], 10) === 603);
}
return FontWatchRunner.HAS_WEBKIT_FALLBACK_BUG;
};
Expand Down Expand Up @@ -110,6 +113,10 @@ goog.scope(function () {
this.lastResortWidths_[FontWatchRunner.LastResortFonts.SERIF] = this.lastResortRulerA_.getWidth();
this.lastResortWidths_[FontWatchRunner.LastResortFonts.SANS_SERIF] = this.lastResortRulerB_.getWidth();

if (FontWatchRunner.hasWebKitFallbackBug()) {
this.lastResortWidths_[FontWatchRunner.LastResortFonts.MOCK_FONT] = this.getMockFontWidth_();
}

this.started_ = goog.now();

this.check_();
Expand Down Expand Up @@ -193,6 +200,35 @@ goog.scope(function () {
return this.metricCompatibleFonts_ === null || this.metricCompatibleFonts_.hasOwnProperty(this.font_.getName());
};


/**
* Calculates the width of a mock font with the current font's variation css style
* before it has finished loading.
*
* @private
* @return {number}
*/
FontWatchRunner.prototype.getMockFontWidth_ = function () {

var mockFontStyle = "@font-face\{font-family: '" + FontWatchRunner.LastResortFonts.MOCK_FONT + "';" +
this.font_.getCssVariation() +
"src: url(some.woff2) format('woff2');\}"

var mockFontCss = this.domHelper_.createStyle(mockFontStyle);
this.domHelper_.insertInto('head', mockFontCss)

var mockFontRuler = new FontRuler(this.domHelper_, this.fontTestString_);
mockFontRuler.setFont(new Font(FontWatchRunner.LastResortFonts.MOCK_FONT, this.font_.getVariation()));
mockFontRuler.insert();

var mockFontWidth = mockFontRuler.getWidth();

mockFontRuler.remove()
this.domHelper_.removeElement(mockFontCss)

return mockFontWidth
}

/**
* Checks the width of the two spans against their original widths during each
* async loop. If the width of one of the spans is different than the original
Expand Down