浏览器 Zoom 上的 ScaleX() 问题
Issues with ScaleX() on browser Zoom
在浏览器中缩放时,scaleX() 属性 不一致。 TranslateX() 完全正常工作,这就是我伸出援手的原因。
我正在使用 Web Animations API 和 Vanilla JS 构建一个阶梯式进度条,目的是在其中插入一个表单,以便我们逐步完成 animation/steps 将通过它显示进度。
我遇到的问题是在测试 ADA 合规性时,特别是在放大页面时。更具体地说,仅当缩放百分比不是 100 的倍数时。因此 100、200、300 和 400% 完美工作。但是 110、125、250%(仅举几例)存在问题。滑过屏幕的圆点正常工作。
意外行为出现在与点一起在屏幕上扩展的栏中,有时它太远有时它不够远。真正让我感到困惑的是,条形和点都是 "controlled" 相同的测量值,即父级 div 的宽度和 dividing 的 3然后乘以当前步长。这就是让我假设问题出在 scaleX 转换中的原因。我仍在 IE 中进行整体测试,在 chrome 和 firefox.
中遇到了这个问题
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My stepped progress bar</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="fonts.css" type="text/css" rel="stylesheet" />
<!-- Web Animation API polyfill-->
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
</head>
<body>
<section>
<div class="progress__container">
<div class="progress__bar">
<div id="progress__fill" class="step1"></div>
<div class="circ__container">
<div class="circ" id="circ__1"></div>
<div class="circ" id="circ__2"></div>
<div class="circ" id="circ__3"></div>
<div class="circ" id="circ__4"></div>
</div>
<div id="progress__dot" class="prog__1"></div>
</div>
<div class="backBar"></div>
<div class="flexrow">
<span class="stepName tab-1">Account</span>
<span class="stepName tab-2">Frequency</span>
<span class="stepName tab-3">Amount</span>
<span class="stepName tab-4">Taxes</span>
</div>
<div class="button__container">
<button class="buttonStep" id="back">Back</button>
<button class="buttonStep is-active" id="next">Next</button>
</div>
</div>
</section>
<script src="script-api.js"></script>
</body>
</html>
CSS:
/* General Styles */
body {
font-family: Arial, helvetica, sans-serif;
}
/* Slider Bar Animation */
#progress__fill {
height:2px;
position: absolute;
top: 7px;
left: 0;
background-color: darkred;
width: 1px;
}
#progress__dot {
background-color: darkred;
color: #fff;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
text-align:center;
line-height: 8px;
padding: 6px;
top: 0;
font-size: 12px;
}
/* Static Bar Elements */
.progress__container {
width: 600px;
margin: 20px auto;
position: relative;
}
.backBar {
height:2px;
width:96%;
position: absolute;
top: 7px;
left: 2%;
background-color: lightgrey;
}
.progress__bar {
z-index: 100;
position: relative;
width: 96%;
margin: 0 auto;
}
.circ {
background-color: #fff;
border: 2px solid lightgrey;
border-radius: 50%;
height: 8px;
width: 8px;
display: inline-block;
position: absolute;
}
.hide {
visibility: hidden
}
.flexrow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.circ__container {
padding-top: 3px;
}
.flexrow {
margin-top: 20px;
}
.stepName {
font-size: 12px;
text-align: center;
}
.stepName:first-child {
text-align: left;
}
.stepName:last-child {
text-align: right;
}
.stepName.bold {
font-weight: 600;
}
/* Buttons */
.button__container {
padding-top: 100px;
}
.buttonStep {
background: grey;
color: #fff;
padding: 10px 25px;
border-radius: 10px;
font-size: 16px;
}
#back {
float: left;
}
#next {
float: right;
}
.is-active {
background: darkred;
}
JS:
// give a starting value for the transformation
var slideBarWidth = 0,
slideBarScalePoint = 0,
currentStep = 1,
dot = document.getElementById('progress__dot'),
boxWidth = dot.parentElement.offsetWidth;
// insert the current step number into the progress dot
dot.innerHTML = currentStep;
// place the background dots on the bar
for (var x = 1; x < 5; x++) {
document.getElementById('circ__' + x).setAttribute('style', 'left: ' + ((boxWidth / 3) * (x - 1)) + 'px');
if (x == 4) {
document.getElementById('circ__' + x).setAttribute('style', 'left: ' + (((boxWidth / 3) * (x - 1)) - document.getElementById('circ__' + x).offsetWidth)+ 'px');
}
}
// define the timing for progress dot
var dotTiming = {
duration: 500,
fill: "both",
easing: 'ease-in-out'
}
// define the timing for sliding bar
var barTiming = {
duration: 500,
fill: "both",
easing: 'ease-in-out'
}
var passedTiming = {
fill: "both"
}
// make the first step name bold
document.getElementsByClassName('tab-' + currentStep)[0].classList.add('bold');
// on click fire the animation
document.getElementById('next').addEventListener('click', function() {
// make sure the slider does not go further than it should
if (currentStep > 3){return;}
// define the keyframes for the progress dot
if (currentStep == 3) {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 1)) + 'px)'},
{transform: 'translateX(' + (((boxWidth / 3) * (currentStep)) - dot.offsetWidth) + 'px)'}
];
} else {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 1)) + 'px)'},
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep)) + 'px)'},
];
}
// define the keyframes for the sliding bar
var slideBar = [
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep - 1)) + ')',
transformOrigin: 'left'
},
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep)) + ')',
transformOrigin: 'left'
}
];
var showDot = [
{backgroundColor: '#fff', border: '2px solid lightgrey' },
{backgroundColor: 'darkred', border: '2px solid darkred' }
];
// putting the keyframes and timings together (progress dot)
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
// putting the keyframes and timings together (sliding bar)
var slidingBar = document.getElementById("progress__fill").animate(
slideBar,
barTiming
);
var passingDot = document.getElementById('circ__' + currentStep).animate(
showDot,
passedTiming
);
// making the animation play forwards
movingDot.playbackRate = 1;
slidingBar.playbackRate = 1;
passingDot.playbackRate = 1;
// starting the animations
movingDot.play();
slidingBar.play();
movingDot.onfinish = passingDot;
// incrementing and setting the step counter
currentStep++;
document.getElementById("progress__dot").innerHTML = currentStep;
if (currentStep > 1) {
document.getElementById('back').classList.add('is-active');
}
if (currentStep > 3) {
document.getElementById('next').classList.remove('is-active');
}
// toggling the bold class for the step names
document.getElementsByClassName('tab-' + (currentStep - 1))[0].classList.remove('bold');
setTimeout(() =>
{
document.getElementsByClassName('tab-' + currentStep)[0].classList.add('bold');
}, 600);
});
document.getElementById('back').addEventListener('click', function() {
// make sure the slider does not go back past the beginning
if (currentStep < 2){return;}
// define the keyframes
if (currentStep == 4) {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 2)) + 'px)'},
{transform: 'translateX(' + (((boxWidth / 3) * (currentStep - 1)) - dot.offsetWidth) + 'px)'}
];
} else {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 2)) + 'px)'},
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 1)) + 'px)'}
];
}
var slideBar = [
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep - 2)) + ')',
transformOrigin: 'left'
},
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep -1 )) + ')',
transformOrigin: 'left'
}
];
var showDot = [
{backgroundColor: 'darkred', border: '2px solid darkred' },
{backgroundColor: '#fff', border: '2px solid lightgrey' }
];
// putting the keyframes and timings together
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
var slidingBar = document.getElementById("progress__fill").animate(
slideBar,
barTiming
);
var passingDot = document.getElementById('circ__' + currentStep).animate(
showDot,
passedTiming
);
// making the animation reverse
movingDot.playbackRate = -1;
slidingBar.playbackRate = -1;
passingDot.playbackrate = -1;
// starting the animation
movingDot.play();
slidingBar.play();
movingDot.onfinish = passingDot;
// decrementing and setting the step counter
currentStep--;
// set the current step number as the number in the progress dot on the page
document.getElementById("progress__dot").innerHTML = currentStep;
if (currentStep < 4) {
document.getElementById('next').classList.add('is-active');
}
if (currentStep < 2) {
document.getElementById('back').classList.remove('is-active');
}
// toggling the bold class for the step names
document.getElementsByClassName('tab-' + (currentStep + 1))[0].classList.remove('bold');
setTimeout(() =>
{
document.getElementsByClassName('tab-' + currentStep)[0].classList.add('bold');
}, 400);
});
我希望点和滑块在穿过页面时对齐,无论缩放百分比如何
在做一些实验时,我发现我可以只使用 "width" 来转换项目而不是 scaleX。这是我最终使用的:
下一个按钮事件:
var slideBar = [
{
width: ((boxWidth / 3) * (currentStep - 1)) + 'px'
},
{
width: ((boxWidth / 3) * (currentStep)) + 'px'
}
];
后退按钮事件:
var slideBar = [
{
width: ((boxWidth / 3) * (currentStep - 2)) + 'px'
},
{
width: ((boxWidth / 3) * (currentStep -1 )) + 'px'
}
];
在浏览器中缩放时,scaleX() 属性 不一致。 TranslateX() 完全正常工作,这就是我伸出援手的原因。
我正在使用 Web Animations API 和 Vanilla JS 构建一个阶梯式进度条,目的是在其中插入一个表单,以便我们逐步完成 animation/steps 将通过它显示进度。 我遇到的问题是在测试 ADA 合规性时,特别是在放大页面时。更具体地说,仅当缩放百分比不是 100 的倍数时。因此 100、200、300 和 400% 完美工作。但是 110、125、250%(仅举几例)存在问题。滑过屏幕的圆点正常工作。
意外行为出现在与点一起在屏幕上扩展的栏中,有时它太远有时它不够远。真正让我感到困惑的是,条形和点都是 "controlled" 相同的测量值,即父级 div 的宽度和 dividing 的 3然后乘以当前步长。这就是让我假设问题出在 scaleX 转换中的原因。我仍在 IE 中进行整体测试,在 chrome 和 firefox.
中遇到了这个问题HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My stepped progress bar</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="fonts.css" type="text/css" rel="stylesheet" />
<!-- Web Animation API polyfill-->
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
</head>
<body>
<section>
<div class="progress__container">
<div class="progress__bar">
<div id="progress__fill" class="step1"></div>
<div class="circ__container">
<div class="circ" id="circ__1"></div>
<div class="circ" id="circ__2"></div>
<div class="circ" id="circ__3"></div>
<div class="circ" id="circ__4"></div>
</div>
<div id="progress__dot" class="prog__1"></div>
</div>
<div class="backBar"></div>
<div class="flexrow">
<span class="stepName tab-1">Account</span>
<span class="stepName tab-2">Frequency</span>
<span class="stepName tab-3">Amount</span>
<span class="stepName tab-4">Taxes</span>
</div>
<div class="button__container">
<button class="buttonStep" id="back">Back</button>
<button class="buttonStep is-active" id="next">Next</button>
</div>
</div>
</section>
<script src="script-api.js"></script>
</body>
</html>
CSS:
/* General Styles */
body {
font-family: Arial, helvetica, sans-serif;
}
/* Slider Bar Animation */
#progress__fill {
height:2px;
position: absolute;
top: 7px;
left: 0;
background-color: darkred;
width: 1px;
}
#progress__dot {
background-color: darkred;
color: #fff;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
text-align:center;
line-height: 8px;
padding: 6px;
top: 0;
font-size: 12px;
}
/* Static Bar Elements */
.progress__container {
width: 600px;
margin: 20px auto;
position: relative;
}
.backBar {
height:2px;
width:96%;
position: absolute;
top: 7px;
left: 2%;
background-color: lightgrey;
}
.progress__bar {
z-index: 100;
position: relative;
width: 96%;
margin: 0 auto;
}
.circ {
background-color: #fff;
border: 2px solid lightgrey;
border-radius: 50%;
height: 8px;
width: 8px;
display: inline-block;
position: absolute;
}
.hide {
visibility: hidden
}
.flexrow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.circ__container {
padding-top: 3px;
}
.flexrow {
margin-top: 20px;
}
.stepName {
font-size: 12px;
text-align: center;
}
.stepName:first-child {
text-align: left;
}
.stepName:last-child {
text-align: right;
}
.stepName.bold {
font-weight: 600;
}
/* Buttons */
.button__container {
padding-top: 100px;
}
.buttonStep {
background: grey;
color: #fff;
padding: 10px 25px;
border-radius: 10px;
font-size: 16px;
}
#back {
float: left;
}
#next {
float: right;
}
.is-active {
background: darkred;
}
JS:
// give a starting value for the transformation
var slideBarWidth = 0,
slideBarScalePoint = 0,
currentStep = 1,
dot = document.getElementById('progress__dot'),
boxWidth = dot.parentElement.offsetWidth;
// insert the current step number into the progress dot
dot.innerHTML = currentStep;
// place the background dots on the bar
for (var x = 1; x < 5; x++) {
document.getElementById('circ__' + x).setAttribute('style', 'left: ' + ((boxWidth / 3) * (x - 1)) + 'px');
if (x == 4) {
document.getElementById('circ__' + x).setAttribute('style', 'left: ' + (((boxWidth / 3) * (x - 1)) - document.getElementById('circ__' + x).offsetWidth)+ 'px');
}
}
// define the timing for progress dot
var dotTiming = {
duration: 500,
fill: "both",
easing: 'ease-in-out'
}
// define the timing for sliding bar
var barTiming = {
duration: 500,
fill: "both",
easing: 'ease-in-out'
}
var passedTiming = {
fill: "both"
}
// make the first step name bold
document.getElementsByClassName('tab-' + currentStep)[0].classList.add('bold');
// on click fire the animation
document.getElementById('next').addEventListener('click', function() {
// make sure the slider does not go further than it should
if (currentStep > 3){return;}
// define the keyframes for the progress dot
if (currentStep == 3) {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 1)) + 'px)'},
{transform: 'translateX(' + (((boxWidth / 3) * (currentStep)) - dot.offsetWidth) + 'px)'}
];
} else {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 1)) + 'px)'},
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep)) + 'px)'},
];
}
// define the keyframes for the sliding bar
var slideBar = [
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep - 1)) + ')',
transformOrigin: 'left'
},
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep)) + ')',
transformOrigin: 'left'
}
];
var showDot = [
{backgroundColor: '#fff', border: '2px solid lightgrey' },
{backgroundColor: 'darkred', border: '2px solid darkred' }
];
// putting the keyframes and timings together (progress dot)
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
// putting the keyframes and timings together (sliding bar)
var slidingBar = document.getElementById("progress__fill").animate(
slideBar,
barTiming
);
var passingDot = document.getElementById('circ__' + currentStep).animate(
showDot,
passedTiming
);
// making the animation play forwards
movingDot.playbackRate = 1;
slidingBar.playbackRate = 1;
passingDot.playbackRate = 1;
// starting the animations
movingDot.play();
slidingBar.play();
movingDot.onfinish = passingDot;
// incrementing and setting the step counter
currentStep++;
document.getElementById("progress__dot").innerHTML = currentStep;
if (currentStep > 1) {
document.getElementById('back').classList.add('is-active');
}
if (currentStep > 3) {
document.getElementById('next').classList.remove('is-active');
}
// toggling the bold class for the step names
document.getElementsByClassName('tab-' + (currentStep - 1))[0].classList.remove('bold');
setTimeout(() =>
{
document.getElementsByClassName('tab-' + currentStep)[0].classList.add('bold');
}, 600);
});
document.getElementById('back').addEventListener('click', function() {
// make sure the slider does not go back past the beginning
if (currentStep < 2){return;}
// define the keyframes
if (currentStep == 4) {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 2)) + 'px)'},
{transform: 'translateX(' + (((boxWidth / 3) * (currentStep - 1)) - dot.offsetWidth) + 'px)'}
];
} else {
var moveDot = [
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 2)) + 'px)'},
{transform: 'translateX(' + ((boxWidth / 3) * (currentStep - 1)) + 'px)'}
];
}
var slideBar = [
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep - 2)) + ')',
transformOrigin: 'left'
},
{
transform: 'scaleX(' + ((boxWidth / 3) * (currentStep -1 )) + ')',
transformOrigin: 'left'
}
];
var showDot = [
{backgroundColor: 'darkred', border: '2px solid darkred' },
{backgroundColor: '#fff', border: '2px solid lightgrey' }
];
// putting the keyframes and timings together
var movingDot = document.getElementById("progress__dot").animate(
moveDot,
dotTiming
);
var slidingBar = document.getElementById("progress__fill").animate(
slideBar,
barTiming
);
var passingDot = document.getElementById('circ__' + currentStep).animate(
showDot,
passedTiming
);
// making the animation reverse
movingDot.playbackRate = -1;
slidingBar.playbackRate = -1;
passingDot.playbackrate = -1;
// starting the animation
movingDot.play();
slidingBar.play();
movingDot.onfinish = passingDot;
// decrementing and setting the step counter
currentStep--;
// set the current step number as the number in the progress dot on the page
document.getElementById("progress__dot").innerHTML = currentStep;
if (currentStep < 4) {
document.getElementById('next').classList.add('is-active');
}
if (currentStep < 2) {
document.getElementById('back').classList.remove('is-active');
}
// toggling the bold class for the step names
document.getElementsByClassName('tab-' + (currentStep + 1))[0].classList.remove('bold');
setTimeout(() =>
{
document.getElementsByClassName('tab-' + currentStep)[0].classList.add('bold');
}, 400);
});
我希望点和滑块在穿过页面时对齐,无论缩放百分比如何
在做一些实验时,我发现我可以只使用 "width" 来转换项目而不是 scaleX。这是我最终使用的:
下一个按钮事件:
var slideBar = [
{
width: ((boxWidth / 3) * (currentStep - 1)) + 'px'
},
{
width: ((boxWidth / 3) * (currentStep)) + 'px'
}
];
后退按钮事件:
var slideBar = [
{
width: ((boxWidth / 3) * (currentStep - 2)) + 'px'
},
{
width: ((boxWidth / 3) * (currentStep -1 )) + 'px'
}
];