An attempt to fix disorted submit button on mobile devices like iPhone - please review

[marek-lach]

No description provided.

[elegaanz]

@marek-lach Hello! What was the issue you are trying to fix? I can't find anything similar to what you describe in the title…

[codecov]

Codecov Report

Merging #370 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #370   +/-   ##
=======================================
  Coverage   28.47%   28.47%           
=======================================
  Files          62       62           
  Lines        5706     5706           
=======================================
  Hits         1625     1625           
  Misses       4081     4081

[marek-lach]

Problem:
When on a mobile device, like an iPhone, the submit comment button gets disorted (i.e. out of shape, squashed) when you press submit. As far as I know, this isn't the case on the desktop.

Before pressing the submit button for a comment on an iPhone (though I suspect Android's the same):

After pressing the submit button on an iPhone (it works, the distortion is just a visual CSS problem):

I am sure the fix for this has to do with responsivness of the submit button, and it must be easy to do, but addmitedly I have no idea, what precisely would fix it, just took a guess.

[elegaanz]

This seems to be related to Safari's rendering engine (I cant' reproduce on my Android phone), and I have no iPhone to test. If it doesn't break anything I'll merge your change, hoping it will fix the issue…

[elegaanz]

It doesn't work: no border is displayed at all… 😕

[marek-lach]

Right, couldn't reproduce the problem on Android. Will try to modify specifically for Safari only then.

[marek-lach]

Hmm... reverted the change and tried a Safari-specific style. Let me know if the border is back as before with this last commit.

[elegaanz]

I don't have the issue with borders anymore, but I have some other issues, for instance on the user page:

I think this is the same issue as here: https://stackoverflow.com/a/5438653

[marek-lach]

I have reverted all of the changes up to now, and added the suggested webkit-specific fix as advised on stack owerflow. As long as this does not disort anything anywhere else, it might work as a quick solution to the problem for now...

[elegaanz]

Thanks! Looks good now. I hope it will fix your issue.