Please add 'aspect-ratio' to the CSS whitelist and enable scrolling="no" on iframes!

Jump to solution
RM-BhamTech
Community Member

I've built a bunch of content as webpages and webapps and gotten it all hosted. It all meets the highest standards for accessibility. It uses responsive design, adjusting to display well on any screen, with thoughtful layouts for both portrait and landscape viewing.

My intent was to embed the content in Canvas pages and quizzes, but the allowlist is too restrictive to make even that functional. I can set the iframe width to 100%, but it falls apart on the height. 

Currently, the height has to be set to an explicit pixel value, or the iframe collapses in on itself... set the height too small and student has to scroll inside the iframe; set the height too large and the content tries to use that space, overflowing the width. I can try to "magic number" the height, but that only works on one screen size. 

If the "aspect-ratio" css property were allowlisted, that would solve my problem beautifully. Set the width to 100% and the aspect-ratio to match the content, and that's that. The content will fit the viewport as intended regardless of screen size or orientation. I hate that I can verify this behavior as the html editor doesn't strip the aspect-ratio property until I hit the save button and the editor closes. 

Allowing scrolling="no" would just be an additional bonus to prevent unneeded behavior. 

Otherwise, I'm going just put in links to view the content in a new tab... not ideal though, a lot of it has been designed to be embedded into quiz stimulus / prompt sections.

So, pretty please!? 

 

Even better would be a few canonized window:postMessage methods to allow the iframe's content to dynamically handle the iframe's sizing, but that's a much bigger ask.

Labels (2)
0 Likes
1 Solution
Chris_Hofer
Community Coach
Community Coach

Hi @RM-BhamTech ...

This sounds like you are requesting new functionality in Canvas.  There is a separate area here in the Community to submit your ideas.  Please check out these resources:

Also, please be aware that the ideas process is going through some changes at the moment, and you can read more about that here:

Sorry this isn't a direct answer to your question, but I hope that it helps to provide some insights on how you can submit your own ideas here in the Community.  Good luck!

View solution in original post