Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery does not render corners well in Windows Phone 8 phone gap application

I have a Phonegap application for Windows Phone 8 that uses web pages inside. I make a button inside a <div> element with data-role="footer" option inside that div. Also button is an <a> element with data-role="button" option inside it.

The button is not rendered always well, there appears some corner issues on it, the corner is not rounded but it is a 90 degrees white ancle instead of blue nice rounded corner.

Is there any known issues on Windows Phone 8 that it does not support some HTML5 features and / or jQuery features?

Edit 1:

Sources (essential parts):

TestButton.java:

public class TestButton extends Widget {
       private static TestButtonUiBinder uiBinder = GWT.create(TestButtonUiBinder.class);

       interface TestButtonUiBinder extends UiBinder<AnchorElement, TestButton> {}

       AnchorElement mAnchor;

       public TestButton() {

            mAnchor = uiBinder.createAndBindUi(this);

            setElement(mAnchor);

            mAnchor.setAttribute("data-role", "button");
       }
}

..and TestViewImpl.java:

    @UiField
    TestButton mBackButton;

    @Override
    public TestButton getBackButton() {
        return mBackButton;
    }

.. and TestViewImpl.ui.xml:

  <b:TestButton ui:field="mBackButton" dataIcon="arrow-l"
                title="{mI18n.back}" toolbarRight="true" />

Edit 2:

Border-radius bug on <a> in IE9 points that similar issues may arise due to the not mature nature of css3 when some combinations of css3 tags do not work well together.

Now, my button renders at Firefox as follows:

<a style="font-weight: bold;" data-role="button" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-hover-b ui-btn-up-b"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
like image 949
mico Avatar asked Mar 28 '13 06:03

mico


1 Answers

Unless anyone suggests any workaround, the current investigations of mine show the result is that this is a bug in the jQuery itself and the workaround should be found outside jQuery or fixing the jQuery itself.

Source: Please have a look at jQuery demo page, e.g. http://jquerymobile.com/demos/1.1.1/docs/buttons/buttons-themes.html and observe e.g. Swatch "a" from the demo page with a wp8 device. You'll observe the weird corners. I tested Lumia 920.

Solution: Wait for 1.4 and hope the best, or manually combine 1.2 and 1.3 and pick best parts of both.

Edited solution: Yes, 1.4.0 is there, and the problem seems to be solved :) They changed the entire look and feel, so the problem went away.

like image 190
mico Avatar answered Oct 19 '22 09:10

mico