I have a connected app that is being used to iframe in an external web application as a apex:CanvasApp.
This works well, except something has started occurring with HTML select controls in Chrome 67.0.3396.99.
Any scrolling in the iframed web application causes the select options to appear out of place when initially clicked. Subsequent clicks appear to position in the expected locations.
The test page itself is super simple.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<select id="select1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div style="min-height: 300px; background-color: lightblue;">
<p>Spacing content to force scrolling</p>
</div>
<div>
<select id="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div style="min-height: 300px; background-color: lightgreen;">
<p>Spacing content to force scrolling</p>
</div>
<div>
<select id="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div style="min-height: 300px; background-color: lightyellow;">
<p>Spacing content to force scrolling</p>
</div>
<div>
<select id="select4">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</body>
</html>
It seems like this is a Chrome bug, as Firefox isn't exhibiting the same problem.
I'll still look at raising a Salesforce support case for this, but it will take some time as I need to get the sample page in a location that is accessible to support.
Is anyone else encountering this? I suspect it is an issue with the double iframes the the Canvas apps use and Chrome.
Raised as support case 20069320 - for HTML select position issues.
One workaround for this is to have the user manually change the magnification to 110%. The change seems to force chrome to render the selects correctly.
Update
Things seem to have taken a turn for the worse with Chrome 69.0.3497.81. Now not only do selects render in the wrong place when initially clicked, but whole areas of the page appear blank/white until forced to re-render.
Raised as support case 20012565 - for the blank areas.
I've found one work around for the blank areas that appear with scrolling in Chrome V69, add a will-change: transform; to the CSS of one of the high levels divs on the page. That seems to force it to repaint the areas on scrolling.