Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

Quá trình chuyển đổi trong Safari trông tệ/giật/lắp đặt

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-03 17:32:49 28 4
mua khóa gpt4 Nike

Tôi có một số chức năng dựa trên thao tác cuộn của người dùng để di chuyển các phần tử lên và xuống dọc theo trang (bắt chước hiệu ứng cuộn).

Để làm cho nó mượt mà hơn một chút, tôi đang sử dụng chuyển tiếp: biến đổi 0,7s khối bezier(0,49, 0,47, 0,63, 0,85);(Sử dụng tiền tố nhà cung cấp thích hợp).

Vấn đề là, ngoại trừ ở safari, nó hoạt động hoàn hảo. Ở đó -webkit-transition: -webkit-transform 0,7s khối bezier(0,49, 0,47, 0,63, 0,85); Làm cho hoạt ảnh di chuyển xung quanh và tạo hiệu ứng rung. Tôi đã đọc về điều này trong một thời gian dài và đã thử thiết lập các thuộc tính phối cảnh và thuộc tính ngược nhưng không thành công.

Có cách nào giải quyết được vấn đề này không/có ai thấy chưa? Safari không cho phép chuyển đổi chuyển đổi?

Bất kỳ trợ giúp trong việc hiểu vấn đề sẽ là tuyệt vời.

Tôi tìm thấy câu đố này http://jsfiddle.net/3yfspjLt/Điều này cho thấy vấn đề của tôi. Nếu lúc đầu nó không nhấp nháy, hãy tiếp tục cuộn lên và xuống.

Vì tò mò, đây là mã của tôi, nhưng tôi tò mò hơn về lý do tại sao lỗi này xảy ra trong safari hơn là trường hợp sử dụng cụ thể của tôi. (Mặc dù tôi chắc chắn đang cố gắng tìm hiểu).

tập tin JS

getElementPositions: function(){ 
    var de = document.documentElement;
    var windowHight = window.innerHeight; 

    var page = ScrollAnimations.getTopBottom(scrollAnimations.featurePage, de, windowHight);
    var profile = ScrollAnimations.getTopBottom(scrollAnimations.featureProfile, de, windowHight);
    var barOne = ScrollAnimations.getTopBottom(scrollAnimations.firstBar, de, windowHight);
    var barTwo = ScrollAnimations.getTopBottom(scrollAnimations.secondBar, de, windowHight);
    var barThree = ScrollAnimations.getTopBottom(scrollAnimations.thirdBar, de, windowHight);

    ScrollAnimations.pageDiff = page.diff;
    ScrollAnimations.pageStartP = page.top - (page.padding -100);

    ScrollAnimations.profileDiff = profile.diff;
    ScrollAnimations.profileStartP = profile.top - (profile.padding/1.3); 

    ScrollAnimations.barOneDiff = barOne.diff;
    ScrollAnimations.barOneStartTop = barOne.top - (barOne.padding/1.3); 

    ScrollAnimations.barTwoDiff = barTwo.diff;
    ScrollAnimations.barTwoStartTop = barTwo.top - (barTwo.padding/1.3);

    ScrollAnimations.barThreeDiff = barThree.diff;
    ScrollAnimations.barThreeStartTop = barThree.top - (barThree.padding/1.3);

    ScrollAnimations.startScrollAnimations();
  },

  getTopBottom: function(el, de, windowHight) {
    kết quả var = {};
    var box = el.getBoundingClientRect();
    result.top = box.top + window.pageYOffset - de.clientTop;
    result.bottom = box.bottom + window.pageYOffset - de.clientTop;
    result.diff = result.bottom - result.top;
    result.padding = windowHight - result.diff;
    return result;
  },
ScrollPage: function(scrollPos){
    var pageHeight = ScrollAnimations.pageScroll.offsetHeight;
    var ScrollDiff = ScrollPos - ScrollAnimations.pageStartP;
    var realPos = -scrollDiff/scrollAnimations.pageDiff;
    var lengthLeft = pageHeight - ScrollAnimations.pageDiff;

    nếu (realPos > 0,09) {
      transY = 0,09 * lengthLeft;
    } khác nếu(realPos < -1) {
      transY = -1 * lengthLeft;
    } khác {
      transY = realPos * lengthLeft;
    }

    ScrollAnimations.pageScroll.setAttribution('style', '-webkit-transform:translate3d(0,' + transY + 'px,0); -moz-transform:translate3d(0,' + transY + 'px,0); - ms-transform:translate3d(0,' + transY + 'px,0); Transform:translate3d(0,' + transY + 'px,0);'); 

      if(Modernizr.orientation) {
        ScrollAnimations.pageScroll.style.transformStyle='preserve-3d';
        ScrollAnimations.pageScroll.style.webkitTransition='0,4s khối-bezier(0,49, 0,47, 0,63, 0,85)';
      }

  },

CSS (Tôi cũng đã thử sử dụng tất cả)

#cuộn trang {
    -webkit-transition: -webkit-transform 0,7s khối bezier(0,49, 0,47, 0,63, 0,85);
    -moz-transition: biến đổi 0,7s khối bezier(0,49, 0,47, 0,63, 0,85);
    -ms-transition: biến đổi 0,7s khối bezier(0,49, 0,47, 0,63, 0,85);
    -o-transition: biến đổi 0,7s khối bezier(0,49, 0,47, 0,63, 0,85);
    chuyển tiếp: biến đổi 0,7s khối bezier(0,49, 0,47, 0,63, 0,85);
  }

câu trả lời hay nhất

Tôi không chắc chắn 100% bạn đang cố gắng đạt được điều gì nhưng hãy thử điều gì đó như thế này...? Hãy cho chúng tôi biết nếu điều này có ích và nếu vấn đề của bạn không được nêu chi tiết, vui lòng thêm mã nguồn khác.

/* thêm giá trị dịch Y của bạn */
-webkit-transform: dịchY(100px);
-moz-transform: dịchY(100px);
biến đổi: dịchY(100px);

-webkit-transition: tất cả 0,7s khối bezier (0,49, 0,47, 0,63, 0,85);
-moz-transition: tất cả 0,7s khối bezier(0,49, 0,47, 0,63, 0,85);
chuyển tiếp: tất cả 0,7s khối bezier(0,49, 0,47, 0,63, 0,85);

Về css - Chuyển đổi trong Safari trông tệ/giật/nói lắp, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/30244379/

28 4 0
Bài viết khuyến nghị: javascript - đã sửa lỗi div chiều cao đầy đủ
Bài viết khuyến nghị: Chuỗi con C# ném ngoại lệ
Bài viết khuyến nghị: c# - Phép tính số học không hoạt động
Bài viết khuyến nghị: PDF trống được tạo khi hình có các ô phụ được lưu vào pdf từ matplotlib trong python3.2
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress