Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iphoneX 上加载特定尺寸图片会导致页面无限刷新 #32

Open
zarkin404 opened this issue Sep 24, 2018 · 1 comment
Open

iphoneX 上加载特定尺寸图片会导致页面无限刷新 #32

zarkin404 opened this issue Sep 24, 2018 · 1 comment

Comments

@zarkin404
Copy link

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: black;
            text-align: center;
        }
    </style>
</head>

<body>
    <script src="./asset/transform.js"></script>
    <script src="./asset/alloy-finger.js"></script>
    <script src="alloy-crop.js"></script>
    <script>
        (function () {
            var mAlloyCrop = new AlloyCrop({
                image_src: "http://pf8xhw02u.bkt.clouddn.com/static/test-crop.jpg",
                width: 375,
                height: 210,
                output: 1,
                ok: function (base64, canvas) {
                    mAlloyCrop.destroy();
                },
                cancel: function () {
                    mAlloyCrop.destroy();
                }
            });
        })();
    </script>

</body>

</html>
@zarkin404
Copy link
Author

zarkin404 commented Sep 24, 2018

经过无数次尝试,发现 bug 代码如下:

<html>

<head>
  <meta name="viewport" content="width=device-width">
  <style>
    .bugbug {
      transform: matrix3d(0.093006, 0, 0, 0, 0, 0.093006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -2016px;
      margin-top: -1512px;
    }
  </style>
</head>

<body>
    <img src="http://pf8xhw02u.bkt.clouddn.com/static/test-crop.jpg" class="bugbug" />
</body>

</html>

margin-left 在 -1900px 左右的时候就正常,显示,但稍微调小到 -1950px 就进入无限页面刷新的死循环了,请问各位大大们什么想法?

@zarkin404 zarkin404 changed the title iphoneX 上加载特定图片会导致页面无限刷新 iphoneX 上加载特定尺寸图片会导致页面无限刷新 Sep 24, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant