Not sure if this is related to issue #2814 but in both Chrome, and the native browser in Honeycomb en Gingerbread (haven't tested it elsewhere) the buttons for input type=image don't render the way they should.
At the bottom of the demo page you can see where it goes wrong and a screenshot.
@danielcha - is this still and issue in 1.1.0? Looks right in my Chrome 18/Mac
I do see the issue on Chrome 18/Win. @toddparker When you disable .ui-btn-hidden opacity 10% with the Chrome inspector you'll see what happens.
Removing -webkit-appearance button solves it. Why has that property been set for something we want to hide anyway? Can't think of any reason but maybe I miss something. BTW - same goes for .ui-select.
After this you will still see something in the upper left corner of the button on that demo page but that's because no image src has been set in the markup.
That made me thinking... why would someone want to use this type of button on JQM? It would result in something like this: http://jsbin.com/iquzag/
We could set the opacity to 100% for input[type="image"] but nothing much that can be done about the stretching
@uGoMobi - I think we do this to make buttons styling more predictable but we could probably use "none" instead of "button" to basically be styled as a plain div. Buttons are hard to style otherwise.
I agree that this is an odd one. If someone wanted to do this, the data-role="none" feature should leave this untouched so they can do what they want
Yes, I think webkit-appearcance none would be better. And we can change that example in input type="image" data-role="none".
Mind testing "none" to see if the button styling changes at all?
On May 5, 2012, at 8:22 AM | May 5, 2012, Jasper de Groot wrote:
Reply to this email directly or view it on GitHub:
Sure, will test it.
Here is a test page: http://jsbin.com/osoxan/3/
Besides the input type="image" button, I don't see any difference between JQM styled buttons after changing the -webkit-appearance property from "button" to "none". I tested Android Gingerbread + ICS, Safari/Win, Chrome/Win. I don't have iOS5 at the moment, maybe you can test that.
Update: I forgot to mention that I also tested -moz-appearance "none" and didn't see any difference either on FF or Fennec emulator. The problem with JQM enhanced input type="image" based buttons doesn't occur on those browsers anyway.
Thanks for that detailed test page. So it looks like this change gets rid of the image bleeding out of the corners too. Looks good to me. Think we should go ahead with this change.
I agree. Will make a PR for the change. You think its useful to keep an example of this kind of button? There is already an example of input type="image" data-role="none" at the native form element gallery page.
Looks good, merging! Thanks.
Closing as fixed.