Проблема с Safari при управлении положением элемента SVG с использованием ScrollMagic - PullRequest
Новая
       35

Проблема с Safari при управлении положением элемента SVG с использованием ScrollMagic

0 голосов
/ 20 апреля 2020

Я хочу программно контролировать положение элемента SVG (простой текст в этом упрощенном примере) в процессе прокрутки. В целях тестирования, сейчас я хочу установить только позицию X "mytext" в 100px.

Отлично работает в Chrome / Firefox / Edge. Не будет работать на Safari (13.0.5 в моем случае) Macos + iOS. Странно то, что первоначальное позиционирование действительно работает с Safari, пока я не объявлю свою сцену ScrollMagi c. Пробовал несколько обходных путей без удачи. Обратите внимание, что использование чистого JS вместо jQuery для преобразования приводит к тому же результату. Любые мысли приветствуются! jsfiddle: https://jsfiddle.net/yumigo/2z6nbm90/2/

$( document ).ready(function() {

		var controller = new ScrollMagic.Controller();

		//will work here 
		//$('#mytext').css({transform: 'translateX(100px)' });

		var startpin = new ScrollMagic.Scene({
				duration: 800
			})
			.setPin(".headeranim")
			.addTo(controller);

		
		//wont work here 
		//$('#mytext').css({transform: 'translateX(100px)' });
		startpin.on("progress", smcallback);


		function smcallback (s) {
			console.log('s.progress=' + s.progress);
			//wont work here 
			$('#mytext').css({transform: 'translateX(100px)' });
			//neither in pure JS
			//document.getElementById('mytext').style.transform="translateX(100px)";
		}

	});
 .headeranim {
	height: 100vh;
	width: 100%;
	position: relative;
	overflow: hidden;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 900;

	/*   letter-spacing:-0.03em; */
}

.svg-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom:50%;/*adjust ratio: 1.75 = 175%*/ 
}

#mysvg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	display: block;
	background-color:#ffffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="trigger"></span>
<div class="headeranim">
	<!-- SVG	 -->
	<div class="svg-container">
  	<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"  width="600px" height="300px" preserveAspectRatio="xMidYMin meet">
		
	  	<defs>
			<mask id="mask" x="0" y="0" width="600" height="300"  maskUnits="userSpaceOnUse"  maskContentUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid meet">
				<rect id="maskrect" x="0" y="0" width="600" height="300"/>
				<text id="masktext" x="300" y="140">D55</text>
			</mask>
			<pattern id="svgbackground"  x="0" width="600" height="300" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" >
				<image xlink:href="https://encoursdedev.com/animation/white.jpg" width="600" height="300" preserveAspectRatio="xMidYMid slice"/>
			</pattern>
			
		</defs>		
		<!--<rect id="myrect" x="0" y="0" width="600" height="300" style="fill: url(#svgbackground);" />-->
		<text id="mytext" x="0" y="50" font-family="Verdana" font-size="30">FOO</text>
  	</svg>

  </div>
	
 
  
</div>

<section class="nextSection">
	<p>HELLO</p>
</section>
...