Skip to content
This repository has been archived by the owner on Apr 4, 2022. It is now read-only.

Samsung Internet input-group padding #81

Closed
ericl85 opened this issue Jun 12, 2017 · 5 comments
Closed

Samsung Internet input-group padding #81

ericl85 opened this issue Jun 12, 2017 · 5 comments

Comments

@ericl85
Copy link

ericl85 commented Jun 12, 2017

The Samsung Internet Browser -- which is the default browser on Samsung Galaxy phones -- displays inputs in a input-group fluid and a input-group vertical with no padding. I haven't been able to duplicate this behavior on any other browser, so I'm in the process of setting up a debugger for it to pin down exactly what the problem is and if there's a easy fix. Any clues would be lovely. :)

screenshot_20170612-125321

@Chalarangelo
Copy link
Owner

Thanks for reporting this! I would expect it has to do with the flex implementation or something similar in said browser, provided that these .input-groups use this feature. However, this does not happen with aligned forms, as far as I can see, which might disprove my theory in the end. It's highly unlikely that something overrides the padding of the input fields so, if this is not a flexbox implementation bug, it might be a bug in the browser's implementation of input or similar. I'll google around to see if this has been reported anywhere else before, otherwise opening a SO question is our best bet to solve this.

Lately, I've been finding a lot of browser bugs that are specific to native browsers and I'm starting to believe that I will have to move away from Normalize and to something else that does actually provide a better documentation on how those are fixed.

@ericl85
Copy link
Author

ericl85 commented Jun 12, 2017

Ok, it's here:
https://github.com/Chalarangelo/mini.css/blob/master/src/mini/_input_control.scss#L115

I think the Samsung browser is interpreting flex-basis: 0 to set the initial width and height of the element to 0 and then nothing ever gives it any height except the border and the padding. My flexbox skills only go as far as flexbox froggy, so I'm not sure what the ultimate solution is. However, flex-basis: auto seemingly fixes it without any side effects for my case.

@Chalarangelo
Copy link
Owner

Will test and, if I don't find any issues with it, I will apply flex-basis: auto as suggested I don't see anything that can actually go wrong, but I need to make sure. I'll keep you posted!

@ericl85
Copy link
Author

ericl85 commented Jun 13, 2017

Ok. Thanks a lot! I'm working it around it pretty easily now, so no worries if you can't fix it. I'm guessing it's an old Chromium bug when Samsung forked that they never patched.

@Chalarangelo
Copy link
Owner

This has been addressed in #83 with a quick and simple fix. Just update to the latest version (I will release it in a little bit) and you shall be good to go!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants