Search code examples
javascripthtmlcsssafari

Is there a way to fix safari from creating grid lines when scaling or transforming an iframe?


In safari, when I transform/scale an iframe, I get some weird grid lines that appear and disappear. How can I remove them?

Here is a codepen, make sure you shrink or increase your viewport to see them. https://codepen.io/davidsalazar/full/yLxxNQX

<iframe class="position-absolute" style="transform: scale(.7);" scrolling="no" src="https://flysumo.com/davidksalazar">
</iframe>

Here is a screenshot of what I'm referring to. enter image description here


Solution

  • The solution is: #result { will-change: transform, filter; } or #result * { will-change: transform, filter; }