У меня есть простое веб-приложение HTML5, которое использует javascript для создания контекста холста и рисования простого изображения каретки (^), на которое затем ссылаются в определении класса CSS для визуализации изображения в нескольких тегах.
Приложение отлично отображается в браузере: пробовал Google Chrome (Win7), Mobile Safari (iPad IOS4 и IOS5, iPod (IOS4 и IOS5). Но если на iPad или iPod я «Добавить на домашний экран», а затем запуститьвеб-приложение, изображение ^ не отображается на.
Я знаю, что существуют различия в способе отображения HTML5 при запуске с домашнего экрана, в отличие от просмотра в Safari, но мои поиски ничего не показалиэто означало бы, что это не должно работать.
Буду признателен, если кто-нибудь сможет пролить свет на это для меня.
Пример кода ниже:
**(index.html)**
<html>
<head>
<link rel="stylesheet" href="styles/main.css" >
<script src="scripts/main.js"></script>
</head>
<body>
<div class="scoreboard-item-wrapper">
<div class="scoreboard-item">
<div class="box" ><button id="btn_homegoalup" class="up" onclick="incAction(true,true)"></button>
</div>
</div>
</div>
</body>
</html>
**(main.js)**
initChevronUp("chevron-up", "hsl(228, 1%, 50%)");
function initChevronUp(id, style) {
var context = document.getCSSCanvasContext("2d", id, 22, 13);
context.save();
context.translate(4,0);
context.clearRect(0, 0, 20, 13);
context.strokeStyle = style;
context.lineWidth = 3;
context.beginPath();
context.moveTo(1, 9);
context.lineTo(6.5, 1);
context.lineTo(12, 9);
context.stroke();
context.restore();
}
**(main.css)**
.scoreboard-item .box button.up{
background:
-webkit-gradient(linear,left top, left bottom,
from(rgba(255, 255, 255, .25)), to(transparent) ),
-webkit-canvas(chevron-up) center center no-repeat transparent;
}