Использовать высоту: 100% внутри div с установленным соотношением сторон – ошибка в некоторых браузерах? ⇐ CSS

[Anonymous]

Примечание: этот вопрос о новой функции CSS: соотношение сторон. Большинство вопросов на этом сайте с похожими ключевыми словами касаются совершенно разных методов.

Хорошо, есть элемент div со следующими установленными свойствами: width, aspect-ratio и max-height. Внутри него находится еще один элемент div с height: 100%. Отлично работает в настольном Chrome и Firefox на рабочем столе. Не работает в Safari на рабочем столе, мобильном Safari или мобильном Chrome.

Вот как это должно выглядеть (или, по крайней мере, выглядит в настольном Chrome):



Вот как это выглядит в мобильном Chrome:



Вот код (здесь jsbin):

div { размер коробки: граница-коробка; } .con3 { граница: 2 пикселя, сплошная черная; ширина: 200 пикселей; высота: 200 пикселей; } .con2 { граница: 2 пикселя, сплошной небесно-голубой; ширина: 100%; соотношение сторон: 9/16; максимальная высота: 100%; } .con1 { граница: 2 пикселя, сплошной фиолетовый; высота: 100%; соотношение сторон: 9/16; максимальная ширина: 100%; } Интересно:
[*]Кто-нибудь в курсе, что здесь происходит? [*]Сообщено ли об этой ошибке? [*]Есть ли обходные пути, позволяющие сохранить использование aspect-ratio в родительском элементе?