Ios 9 material-icons

[paulux84]

On IOS 9 material-icons are displayed wrong.

As you can see an unexpected space is rendered between icon and text.

Another example...

...and so on...

This bug is obviously reflected on all the components that have an icon.

[BenDol]

What version of GMD are you using?

[paulux84]

1.5.0 release
But my screenshot are on http://gwtmaterialdesign.github.io/gwt-material-demo/snapshot/

[BenDol]

Was this working previously?

[paulux84]

I don't know...i've never tried IOS 9 before.
a really strange things is that sometimes on load all is displayed correctly...but if i do something (for example scroll) the bug appears

[MarcoCucchi]

My fault, this wasn't working previously, I did my test on Osx/Chrome not with Safari. (on previous similar bug #309)

[BenDol]

I have tested this on Safari 9.1.1 and it works perfectly fine there. If updating Safari isn't a good solution a PR with a fix would be greatly appreciated! That being said I tested it on Safari 7.x too without any problems. Seems like an issue in a Safari build.

[paulux84]

@BenDol the problem is on IO9...only for mobile for me (example ipad/iphone)
i've tested with various browser and ios version (i've premium version of browserstack) and the bug exist in 1.5.0 http://gwtmaterialdesign.github.io/gwt-material-demo/ and 1.5.1 http://gwtmaterialdesign.github.io/gwt-material-demo/snapshot/.
I don't know if the same problem is present in previous version, but if i do the same test in materializecss.com all works great.
I've tried many solution with browserstack developer tools, but nothings seems to have any effect.

[paulux84]

@BenDol in some devices safari works great but the problem appears in chrome -.-'

[paulux84]

@BenDol EUREKA!
On IOS 9 the browser set the width of the as if to render the inner text.
So for example the material icon "polymer " width is bigger then material icon "book"...panic!!!

[paulux84]

And why in materializecss.com this bug is not present??

[BenDol]

Strange indeed, is there an advised solution out there?

[paulux84]

no...i can only say that if i remove "font-family: Material Icons" the width is correct... arrrrr

[BenDol]

Can you test the snapshot demo now with my latest changes?

[paulux84]

if your changes are on this url http://gwtmaterialdesign.github.io/gwt-material-demo/snapshot...still not working!
if i need to compile it from master and try locally... you must wait tomorrow morning...i must go...

[paulux84]

I must compile locally?

Il 23 maggio 2016 20:54:57 CEST, Ben Dol notifications@github.com ha scritto:

Can you test the snapshot
demo
now with my latest changes?

---

You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub:
#327 (comment)

Inviato dal mio dispositivo Android con K-9 Mail. Perdonate la brevità.

[paulux84]

Goodmorning,
i've done another little step towards the solution...
if i remove <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> and directly import <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> it works...

[paulux84]

the solution is something here

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v16/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

I suppose that is related to google/material-design-icons#205

I've made a little workaround that works great:
simply i stop using self hosted materil-icons.css and inject link to google stylesheet...

public class MaterialDesignBase {

 public void load() {
        inject(MaterialResources.INSTANCE.materializeJs());
        inject(MaterialResources.INSTANCE.animationJs());
        inject(MaterialResources.INSTANCE.shrinkJs());
        loadExternalCss("https://fonts.googleapis.com/icon?family=Material+Icons");

    }

    /** Load CSS file from url */
    protected static void loadExternalCss(String url){
        LinkElement link = Document.get().createLinkElement();
        link.setRel("stylesheet");
        link.setHref(url);
        nativeAttachToHead(link);
    }

    /**
     * Attach element to head
     */
    protected static native void nativeAttachToHead(JavaScriptObject scriptElement) /*-{
        $doc.getElementsByTagName("head")[0].appendChild(scriptElement);
    }-*/;

...
...

So Google provide the correct stylesheet and font format based on browser that do the request and the problem disappear 🎯

[paulux84]

I have a commit with this fix...i make a pull request?

[kevzlou7979]

Yes make a PR so that we can review. Thanks for the contribution.

On Tue, May 24, 2016 at 5:11 PM paulux84 notifications@github.com wrote:

I have a commit with this fix...i make a pull request?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#327 (comment)

[BenDol]

@paulux84 that is great news! Put together a PR and we will take a look. Thanks a lot!

[paulux84]

#330 pull request done

[BenDol]

Can you test the latest version? I have submitted a fix already. Let me know if it works (snapshot is updated).

[MarcoCucchi]

@BenDol it doesn't work on OSX (http://gwtmaterialdesign.github.io/gwt-material-demo/snapshot/#!buttons)

[BenDol]

@MarcoCucchi we will talk in gitter from now on https://gitter.im/GwtMaterialDesign/gwt-material

[BenDol]

Resolved for 1.5.1