Skip to content
This repository

input buttons of type=image not rendering properly #3423

Closed
danielcha opened this Issue January 12, 2012 · 11 comments

4 participants

danielcha Jasper de Groot Todd Parker Scott Jehl
danielcha

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.

Todd Parker

@danielcha - is this still and issue in 1.1.0? Looks right in my Chrome 18/Mac

Jasper de Groot
Owner
uGoMobi commented May 05, 2012

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

Todd Parker

@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

Jasper de Groot
Owner
uGoMobi commented May 08, 2012

@toddparker

Yes, I think webkit-appearcance none would be better. And we can change that example in input type="image" data-role="none".

Todd Parker
Jasper de Groot
Owner
uGoMobi commented May 08, 2012

Sure, will test it.

Jasper de Groot
Owner
uGoMobi commented May 09, 2012

@toddparker

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.

Todd Parker

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.

Jasper de Groot
Owner
uGoMobi commented May 10, 2012

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.

Scott Jehl

Looks good, merging! Thanks.

Jasper de Groot uGoMobi closed this May 21, 2012
Jasper de Groot
Owner
uGoMobi commented May 21, 2012

Closing as fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.