Our clients embed our iframe which has a single input, and until a recent Chrome update never had this issue, but the styles of the iframe are not taking effect until some sort of interaction is taking place with the frame.
This is obliviously a bug, but I can't find any documentation or fix for it.
The following remedy the issue.
- Hover or focus on the frame
- Clicking the devtools inspect tool.
- Resizing the window.
- Clicking on the iframe html in the element window.
The first image below is the unstyled buggy version and the second is the correct version after interaction with the page.
This has been difficult to troubleshoot since the nature of the bug fixes itself on basically any interaction. One client used Calc() which I removed and it made no difference. There does seem to be some corelation that these clients sites are all dynamically loaded (anguilar/react), so it could be that the DOM is updated before the styles can take effect?
Default Iframe Input CSS is
input {
width: 100%;
border-style: none;
padding: 0;
padding-top: 2px;
font-size: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
iframe html
<iframe src="" frameborder="0" width="100%" height="100%" id="" name="" scrolling="no"></iframe>