Font size inconsistent on iOS (appears fine in development, but differs for live/production)

[AndrewNow]

Hey all,

I'm having an issue styling the font size of the children of my marquee.

The font size doesn't seem to change on the live version of the site, but appears fine locally.

Testing:

Production:

Here's my code:

const BannerMarquee = ({ data }) => {
  return (
    <Wrapper>
      <Marquee gradientWidth={0} speed={55}>
        <small>
          <Link href={`${data.link}`}>{data.title}</Link>
        </small>
      </Marquee>
    </Wrapper>
  );
};

export default BannerMarquee;

const Wrapper = styled.div`
  width: 100%;
  background-color: var(--color-turquoise);
  * {
    font-size: 16px !important;
  }
  small {
    padding: 1rem 0;
  }

  small > a {
    text-decoration: none;
    color: var(--static-black);
  }

  :hover {
    /* cursor: pointer; */
    small > a {
      text-decoration: underline;
    }
  }
  @media (max-width: ${breakpoints.m}px) {
    * {
      font-size: 14px !important;
    }
  }
`;

[givi-phirtskhalava]

Hi @AndrewNow, had the same issue and this seems to fix it:

body { -webkit-text-size-adjust: 100%; }

More on https://stackoverflow.com/a/4966556

[fallenleavesguy]

me too.-webkit-text-size-adjust: 100%; fixed it.