981923 - TinyMCE and other buttons not displayed when AiSquared's ZoomText is installed

Status: RESOLVED INVALID

(Core :: Graphics: Text, defect)

Description

[Steve Repsher]

Attachment: What the TinyMCE demo page looks like with ZoomText installed

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140212131424

Steps to reproduce:

Simply install latest ZoomText (aisquared.com) assistive technology software alongside Firefox, then view the following example problem page:

TinyMCE demo page (http://www.tinymce.com/tryit/full.php)

The buttons controlling text weight, alignment, etc. do not display properly.  I've also seen the problem heavily when logged into Twitter, and on many other sites, usually related to clickable icons.


Actual results:

Buttons and icons (which are often just web fonts) display as unicode-type squares instad of actual images.  See attached PDF.


Expected results:

Buttons/Icons/Fonts should load and display actual images.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Is ZoomText forcing use of fonts that don't have those characters?

Comment 2

[Steve Repsher]

I don't think that is what is going on, but I can't say for sure.  I should have also mentioned that this problem only occurs in Firefox, and is not an issue in IE or Chrome.  I've also verified the cause effect by installing and uninstalling ZoomText, and the issue occurs whether ZoomText is active or not.  I also have a ticket in with AiSquared, but I have no way to track that except by emailing [e-mail] and asking.

Comment 3

[Steve Repsher]

Attachment: tinymce_demo_log_with_zoomtext.txt

Comment 4

[Steve Repsher]

Attachment: tinymce_demo_load_log_without_zoomtext.txt.txt

Added 2 attachments as example Firefox console logs when loading the TnyMCE demo page.  Thy are very similar with a few extra errors in the one with ZoomText installed.

Having a Firefox expert reproduce the errors and look at it more closely would be really appreciated.  You can download a trial version of ZoomText that takes 60 days to expire.

Comment 5

[Steve Repsher]

I managed to decipher exactly "what" the problem is, but not really "why" there is a compatibility issue.  It has nothing to do with JavaScript.  The icons are attempted to be displayed as a font code using CSS (e.g. .element:before {content = '\f109'}).  The following page illustrates the problem as well using the Font Awesome set and even gives the CSS code used to display it: http://astronautweb.co/snippet/font-awesome/.  I see all the icons correctly in IE and Chrome, but not in Firefox.

Comment 6

[Steve Repsher]

Sorry to pile on the emails, but here is more relevant information.  The problem is not just with displaying via <div> and CSS content, but also with the <i> tag as none of the icons on the Font Awesome site display properly: http://fortawesome.github.io/Font-Awesome/.

This is a very popular web font, which explains why I'm seeing the issue all over the web.

Comment 7

[Timothy Nikkel (:tnikkel)]

I looked at Firefox 27 (release), latest Firefox Nightly, Chrome, and Safari on Mac and I couldn't see any difference on http://fortawesome.github.io/Font-Awesome/ . Maybe this only happens on Windows? Or maybe there is some other difference?

Comment 8

[Steve Repsher]

I can only confirm the problem on Windows since since I don't have a Mac to test on.  Did you have ZoomText Mac installed?  Just re-iterating this only occurs when ZoomText is installed.  Thanks for taking a look though.

Comment 9

[Timothy Nikkel (:tnikkel)]

(In reply to steverep+bugzilla from comment #8)
> I can only confirm the problem on Windows since since I don't have a Mac to
> test on.  Did you have ZoomText Mac installed?  Just re-iterating this only
> occurs when ZoomText is installed.  Thanks for taking a look though.

Oh, no I don't have ZoomText. I thought that page was a reduced testcase that didn't need ZoomText to show the problem.

Comment 10

[Steve Repsher]

Sorry if I was unclear.  At least for Font Awesome, I found a work-around by downloading and installing their OpenType font file to Windows.  Of course, this only fixes websites using FA icons, and not TinyMCE or other sites.  To me though, this just spells a web font loading issue, and not a graphical display issue.  Something about the way Firefox is trying to load these iconic web fonts is hindered by ZoomText in a way that doesn't affect other browsers.

Comment 11

[Jonathan Kew [:jfkthame]]

If you disable hardware acceleration (in Tools / Options / Advanced) and restart Firefox, does that make any difference?

Comment 12

[Steve Repsher]

No, that makes no difference.  Hardware acceleration is recommend to be off in Firefox by ZoomText, but it really makes no difference unless zoomed to high magnification.

In any case, I found the problem parameter in about:config - gfx.downloadable_fonts.enabled.  In my configuration, it was set to false, and oddly that is claimed to be the default.  However, when I compared to a nearly identical machine without ZoomText installed, the default it rightly true.  So, either Firefox is responding to ZoomText with a different default value, or ZoomText made a poor choice and hacked the Firefox default parameter set.  Can anyone investigate this on the Firefox end in the code?

And if it wasn't obvious, toggling the value to true solves the problem.

Comment 13

[Boris Zbarsky [:bzbarsky]]

We don't have anything in Firefox checking for ZoomText...

With ZoomText installed, are there any files in the Firefox install directory that mention that preference name?

Comment 14

[Steve Repsher]

I searched before but I guess I missed it the first time.... yep, it's ZoomText's fault.  There's a "C:\Program Files (x86)\Mozilla Firefox\defaults\pref\zt_config.js" whose sole purpose is to change that parameter to false and annoy me.  Thanks for all your time.