Как я могу сказать (для целей тестирования), если для анимации CSS включена функция ускорения аппаратного обеспечения?
У меня есть следующий код, который существенно расширяет элемент и делает его полноэкранным (без использования полноэкранного API HTML5). Он работает как заикающаяся астматическая черепаха на большинстве мобильных телефонов при использовании анимации jQuery, поэтому я использовал CSS3 вместо этого.
Вот пример jsFiddle:
$("#makeFullscreen").on("click", function() {
var map = $("#map"),
mapTop = map.offset().top,
mapLeft = map.offset().left;
$("#map").css({
"position": "fixed",
"top": mapTop,
"left": mapLeft,
"width": map.outerWidth(true),
"height": map.outerHeight(true)
});
setTimeout(function(){map.addClass("fullscreen")},1);
return false;
});.mapContainer {
width: 150px;
height: 200px;
position: relative;
margin: 0 auto;
}
.map {
background: #00f;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.fullscreen {
-webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
#makeFullscreen {
margin-top: 20px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapContainer">
<div id="map" class="map">
<button id="makeFullscreen">Make Fullscreen</button>
</div>
</div>