iOS7 Safari - anchor changes width first time it is tapped

Question

I have a button class anchor CSSed as follows:

.button {
             display: inline-block;
             width: 8.0em;
             text-align: center;
             text-decoration: none;
             background-color: #840;
             letter-spacing: 1px;
             line-height: 2.2em;
             padding: 0.5em 0.2em;
             border: 4px solid #420;
        }

See below for an example with FAQ tapped.

It doesn't happen reliably, but typically only the first time a button is tapped, sometimes when you go back the button is back to normal, other times it is wider, other times it looks larger (meaning width, height and font are larger), other times all the buttons look smaller!

If you want to try it out, you need to use Safari on an iPhone -- iMac and iPad seem to work okay.

Answer 1

I had a similar situation lately on the iPhone (well itouch but it is using the same iOS) I had a paragraph that for some unknown reason the text was reflowing and becoming bigger than the heading text. But rotating the device the text reflowed and changed size. I fixed it with this:

  -webkit-text-size-adjust: 100%;

I found this answer originally here:

Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?

Hope that works for you.