Element with "zoom content" check gets CSS transform: scaleX(0) - bugs on IOS

Responsive Responsive Layouts
1

Hello,

A possible bug?
I have attached a test project. See below.

When trying to set a responsive layout.

I have a footer rectangle element that stays to the bottom and stretches to page width.

Now, when the “Scale behaviour” “Zoom Content” checkbox is checked, the footer disappears in IOS.

In this particular case, the option adds a CSS transform with scaleX(0), which doesn’t seem to make sense.

I could not create a project from scratch with the same problem, it had to be copied from another project with that bug.

It seems to be a combination of options that sets the scaleX to zero.

test-scale-bug-ios.zip (157.7 KB)

NB: Of course it does not make sense to check “Zoom content” for a empty rectangle. But, here it is…

Thanks

2

delete your head:
<style> html { min-height: 638px; } </style>

2 Likes
3

Hi @strmiska,
Unfortunately, that does not fix the problem…

But, unchecking “zoom contents” does.

I think it may be a bug in Hype:

In iOS 9.3, checking “zoom contents” (in this project) results in:
transform: matrix(0, 0, 0, 1, 0, 0); transform-origin: 496px 40px;
matrix() first parameter is scaleX(0) which changes the div’s width to 0px.

But in Chrome, checking “Zoom contents”, results in :
transform: matrix(1.3498, 0, 0, 1, 0, 0); transform-origin: 496px 40px;

Here is a new version: test-scale-bug-ios-v2.zip (332.6 KB)

Anyway, It may also be a bug in iOS’ safari…

1 Like