We Keep Coding

Interacting programmatically with ipywidgets Video widget in Jupyter notebook

I was trying to build a Jupyter notebook solution for outlier analysis of video dataset. I wanted to use Video widget for that purpose, but I didn't find in the documentation how to get a current video frame and/or scroll to needed position by calling some widget's method. My problem is very similar (virtually the same) to these unanswered questions one and two.
I managed to implement the idea by saving the video frames to numpy array and employing matplotlib's imshow function, but video playing is very jittering. I used blitting technique to get some extra fps, but it didn't help much, and in comparison, Video widget produces a smoother experience. It looks like Video widget is essentially a wrapper for browser's built-in video player.
Question: How can I get control of widget's playing programmatically so I can synchronize multiple widgets? Could some %%javascript magic help with a IPython.display interaction?
Here below is a Python code snippet just for illustration purposes, to give you an idea of what I want to achieve.
%matplotlib widget
from videoreader import VideoReader # nice pithonic wrapper for video reading with opencv
import numpy as np
import matplotlib.pyplot as plt
from ipywidgets import IntSlider, Play, link, HBox, VBox
# prepare buffered video frames
vr = VideoReader('Big.Buck.Bunny.mp4')
fps = vr.frame_rate
frames = []
for frame in vr[0:300:1]:
frames.append(frame[:,:,::-1]) # brg2rgb
del vr
vi_buff = np.stack(frames, axis=0) # dimensions (T, H, W, C)
# simulate random signal for demonstration purposes
t = np.linspace(0.0, vi_buff.shape[0], num=vi_buff.shape[0]*10)
s = np.sin(2*np.pi*t)*np.random.randn(vi_buff.shape[0]*10)
plt.ioff()
fig = plt.figure(figsize=(11, 8))
ax1 = plt.subplot2grid((6, 6), (0, 0), rowspan=2, colspan=3)
ax2 = plt.subplot2grid((6, 6), (0, 3), colspan=3)
ax3 = plt.subplot2grid((6, 6), (1, 3), colspan=3)
plt.ion()
# initial plots
img = ax1.imshow(vi_buff[0,...])
l0 = ax2.plot(t, s)
l1 = ax3.plot(t, -s)
# initial scene
lo_y, hi_y = ax2.get_ybound()
ax2.set_xbound(lower=-12., upper=2.)
ax3.set_xbound(lower=-12., upper=2.)
def update_plot(change):
val = change.new
img.set_data(vi_buff[val,...])
ax2.axis([val - 12, val + 2, lo_y, hi_y])
ax3.axis([val - 12, val + 2, lo_y, hi_y])
fig.canvas.draw_idle()
player = Play(
value=0, #intial frame index
min=0,
max=vi_buff.shape[0]-1,
step=1,
interval=int(1/round(fps)*1000) #referesh interval in ms
)
fr_slider = IntSlider(
value=0,
min=0,
max=vi_buff.shape[0]-1
)
fr_slider.observe(update_plot, names='value')
link((player,"value"), (fr_slider,"value"))
VBox([HBox([player, fr_slider]), fig.canvas])

I had to learn it the hard way and write my own custom Video widget. Thanks to the authors of ipywidgets module, it was not from the scratch. I also found out that, what I wanted to do, possibly could be done in the easier way with PyViz Panel Video. I am sharing my solution if anyone interested and it could save you the time learning the front-end and Backbone.js.
Caution: it won't run in JupyterLab, you need to switch to Jupyter Classic Mode. Please share a solution in the comments, if you know how to fix: “Javascript Error: require is not defined”
Widget Model on the Python side
from traitlets import Unicode, Float, Bool
from ipywidgets import Video, register
#register
class VideoE(Video):
_view_name = Unicode('VideoEView').tag(sync=True)
_view_module = Unicode('video_enhanced').tag(sync=True)
_view_module_version = Unicode('0.1.1').tag(sync=True)
playing = Bool(False, help="Sync point for play/pause operations").tag(sync=True)
rate = Float(1.0, help="Sync point for changing playback rate").tag(sync=True)
time = Float(0.0, help="Sync point for seek operation").tag(sync=True)
#classmethod
def from_file(cls, filename, **kwargs):
return super(VideoE, cls).from_file(filename, **kwargs)
Widget View on the front-end
%%javascript
require.undef('video_enhanced');
define('video_enhanced', ["#jupyter-widgets/controls"], function(widgets) {
var VideoEView = widgets.VideoView.extend({
events: {
// update Model when event is generated on View side
'pause' : 'onPause',
'play' : 'onPlay',
'ratechange' : 'onRatechange',
'seeked' : 'onSeeked',
},
initialize: function() {
// propagate changes from Model to View
this.listenTo(this.model, 'change:playing', this.onPlayingChanged); // play/pause
this.listenTo(this.model, 'change:rate', this.onRateChanged); // playbackRate
this.listenTo(this.model, 'change:time', this.onTimeChanged); // currentTime
},
// View -> Model
onPause: function() {
this.model.set('playing', false, {silent: true});
this.model.save_changes();
},
// View -> Model
onPlay: function() {
this.model.set('playing', true, {silent: true});
this.model.save_changes();
},
// Model -> View
onPlayingChanged: function() {
if (this.model.get('playing')) {
this.el.play();
} else {
this.el.pause();
}
},
// View -> Model
onRatechange: function() {
this.model.set('rate', this.el.playbackRate, {silent: true});
this.model.save_changes();
},
// Model -> View
onRateChanged: function() {
this.el.playbackRate = this.model.get('rate');
},
// View -> Model
onSeeked: function() {
this.model.set('time', this.el.currentTime, {silent: true});
this.model.save_changes();
},
// Model -> View
onTimeChanged: function() {
this.el.currentTime = this.model.get('time');
},
});
return {
VideoEView : VideoEView,
}
});
And the actual job I needed to get done
from ipywidgets import link, Checkbox, VBox, HBox
class SyncManager():
'''
Syncing videos needs an explicit setting of "time" property or clicking on the progress bar,
since the property is not updated continuously, but on "seeked" event generated
'''
def __init__(self, video1, video2):
self._links = []
self._video1 = video1
self._video2 = video2
self.box = Checkbox(False, description='Synchronize videos')
self.box.observe(self.handle_sync_changed, names=['value'])
def handle_sync_changed(self, value):
if value.new:
for prop in ['playing', 'rate', 'time']:
l = link((self._video1, prop), (self._video2, prop))
self._links.append(l)
else:
for _link in self._links:
_link.unlink()
self._links.clear()
video1 = VideoE.from_file("images/Big.Buck.Bunny.mp4")
video1.autoplay = False
video1.loop = False
video1.width = 480
video2 = VideoE.from_file("images/Big.Buck.Bunny.mp4")
video2.autoplay = False
video2.loop = False
video2.width = 480
sync_m = SyncManager(video1, video2)
VBox([sync_m.box, HBox([video1, video2])])

How to poll a Google Doc from an add-on

A documented restriction with document and sheet add-ons is that Apps Script cannot tell what a user does outside of the add-on. This tantalizing tip is given:
It is possible to poll for changes in a file's contents from a
sidebar's client-side code, although you'll always have a slight
delay. That technique can also alert your script to changes in the
user's selected cells (in Sheets) and cursor or selection (in Docs).
Sadly, this isn't shown in any of the demo code. How can I do it?

The polling is done from the html code in your add-on's User Interface, calling across to server-side Apps Script functions using google.script.run.
Using jQuery simplifies this, and we can even start with the answers from jQuery, simple polling example.
function doPoll(){
$.post('ajax/test.html', function(data) {
alert(data); // process results here
setTimeout(doPoll,5000);
});
}
The basic idea can work for Google Apps Script, if we replace the ajax calls with the GAS equivalents.
Here's the skeleton of the poll function that you would use in your html file:
/**
* On document load, assign click handlers to button(s), add
* elements that should start hidden (avoids "flashing"), and
* start polling for document updates.
*/
$(function() {
// assign click handler(s)
// Add elements that should start hidden
// Start polling for updates
poll();
});
/**
* Poll a server-side function 'serverFunction' at the given interval
* and update DOM elements with results.
*
* #param {Number} interval (optional) Time in ms between polls.
* Default is 2s (2000ms)
*/
function poll(interval){
interval = interval || 2000;
setTimeout(function(){
google.script.run
.withSuccessHandler(
function(results) {
$('#some-element').updateWith(results);
//Setup the next poll recursively
poll(interval);
})
.withFailureHandler(
function(msg, element) {
showError(msg, $('#button-bar'));
element.disabled = false;
})
.serverFunction();
}, interval);
};
Add-on Example, Document Poller
This is a demonstration of the jQuery polling technique calling server-side Google Apps Script functions to detect user behavior in a Google Document. It does nothing useful, but it showcases a few things that would typically require knowledge of the user's activity and state of the document, for instance context-sensitve control over a button.
The same principle could apply to a spreadsheet, or a stand-alone GAS Web Application.
Like the UI App example in this question, this technique could be used to get around execution time limits, for operations with a User Interface at least.
The code builds upon the example add-on from Google's 5-minute quickstart. Follow the instructions from that guide, using the code below instead of that in the quickstart.
Code.gs
/**
* Creates a menu entry in the Google Docs UI when the document is opened.
*
* #param {object} e The event parameter for a simple onOpen trigger. To
* determine which authorization mode (ScriptApp.AuthMode) the trigger is
* running in, inspect e.authMode.
*/
function onOpen(e) {
DocumentApp.getUi().createAddonMenu()
.addItem('Start', 'showSidebar')
.addToUi();
}
/**
* Runs when the add-on is installed.
*
* #param {object} e The event parameter for a simple onInstall trigger. To
* determine which authorization mode (ScriptApp.AuthMode) the trigger is
* running in, inspect e.authMode. (In practice, onInstall triggers always
* run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or
* AuthMode.NONE.)
*/
function onInstall(e) {
onOpen(e);
}
/**
* Opens a sidebar in the document containing the add-on's user interface.
*/
function showSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
.setTitle('Document Poller');
DocumentApp.getUi().showSidebar(ui);
}
/**
* Check if there is a current text selection.
*
* #return {boolean} 'true' if any document text is selected
*/
function checkSelection() {
return {isSelection : !!(DocumentApp.getActiveDocument().getSelection()),
cursorWord : getCursorWord()};
}
/**
* Gets the text the user has selected. If there is no selection,
* this function displays an error message.
*
* #return {Array.<string>} The selected text.
*/
function getSelectedText() {
var selection = DocumentApp.getActiveDocument().getSelection();
if (selection) {
var text = [];
var elements = selection.getSelectedElements();
for (var i = 0; i < elements.length; i++) {
if (elements[i].isPartial()) {
var element = elements[i].getElement().asText();
var startIndex = elements[i].getStartOffset();
var endIndex = elements[i].getEndOffsetInclusive();
text.push(element.getText().substring(startIndex, endIndex + 1));
} else {
var element = elements[i].getElement();
// Only translate elements that can be edited as text; skip images and
// other non-text elements.
if (element.editAsText) {
var elementText = element.asText().getText();
// This check is necessary to exclude images, which return a blank
// text element.
if (elementText != '') {
text.push(elementText);
}
}
}
}
if (text.length == 0) {
throw 'Please select some text.';
}
return text;
} else {
throw 'Please select some text.';
}
}
/**
* Returns the word at the current cursor location in the document.
*
* #return {string} The word at cursor location.
*/
function getCursorWord() {
var cursor = DocumentApp.getActiveDocument().getCursor();
var word = "<selection>";
if (cursor) {
var offset = cursor.getSurroundingTextOffset();
var text = cursor.getSurroundingText().getText();
word = getWordAt(text,offset);
if (word == "") word = "<whitespace>";
}
return word;
}
/**
* Returns the word at the index 'pos' in 'str'.
* From https://stackoverflow.com/questions/5173316/finding-the-word-at-a-position-in-javascript/5174867#5174867
*/
function getWordAt(str, pos) {
// Perform type conversions.
str = String(str);
pos = Number(pos) >>> 0;
// Search for the word's beginning and end.
var left = str.slice(0, pos + 1).search(/\S+$/),
right = str.slice(pos).search(/\s/);
// The last word in the string is a special case.
if (right < 0) {
return str.slice(left);
}
// Return the word, using the located bounds to extract it from the string.
return str.slice(left, right + pos);
}
Sidebar.html
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<div class="sidebar branding-below">
<form>
<div class="block" id="button-bar">
<button class="blue" id="get-selection" disabled="disable">Get selection</button>
</div>
</form>
</div>
<div class="sidebar bottom">
<img alt="Add-on logo" class="logo" height="27"
id="logo"
src="https://www.gravatar.com/avatar/adad1d8ad010a76a83574b1fff4caa46?s=128&d=identicon&r=PG">
<span class="gray branding-text">by Mogsdad, D.Bingham</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
/**
* On document load, assign click handlers to button(s), add
* elements that should start hidden (avoids "flashing"), and
* start polling for document selections.
*/
$(function() {
// assign click handler(s)
$('#get-selection').click(getSelection);
// Add elements that should start hidden
var newdiv1 = $( "<div class='block' id='cursor-word'/>" ).hide(),
newdiv2 = $( "<div class='block' id='selected-text'/>" ).hide();
$('#button-bar').after( newdiv1, newdiv2 );
$('#cursor-word').html('<H2>Word at cursor:</H2><p id="cursor-word-content"></p>');
$('#selected-text').html('<H2>Selected text:</H2><p id="selected-text-content"></p>');
// Start polling for updates
poll();
});
/**
* Poll the server-side 'checkSelection' function at the given
* interval for document selection, and enable or disable the
* '#get-selection' button.
*
* #param {Number} interval (optional) Time in ms between polls.
* Default is 2s (2000ms)
*/
function poll(interval){
interval = interval || 2000;
setTimeout(function(){
google.script.run
.withSuccessHandler(
function(cursor) {
if (cursor.isSelection) {
// Text has been selected: enable button, hide cursor word.
$('#get-selection').attr('disabled', false);
$('#cursor-word').hide();
// $('#selected-text').show(); // Not so fast - wait until button is clicked.
}
else {
$('#get-selection').attr('disabled', true);
$('#cursor-word').show();
$('#selected-text').hide();
}
$('#cursor-word-content').text(cursor.cursorWord);
//Setup the next poll recursively
poll(interval);
})
.withFailureHandler(
function(msg, element) {
showError(msg, $('#button-bar'));
element.disabled = false;
})
.checkSelection();
}, interval);
};
/**
* Runs a server-side function to retrieve the currently
* selected text.
*/
function getSelection() {
this.disabled = true;
$('#error').remove();
google.script.run
.withSuccessHandler(
function(selectedText, element) {
// Show selected text
$('#selected-text-content').text(selectedText);
$('#selected-text').show();
element.disabled = false;
})
.withFailureHandler(
function(msg, element) {
showError(msg, $('#button-bar'));
element.disabled = false;
})
.withUserObject(this)
.getSelectedText();
}
/**
* Inserts a div that contains an error message after a given element.
*
* #param msg The error message to display.
* #param element The element after which to display the error.
*/
function showError(msg, element) {
var div = $('<div id="error" class="error">' + msg + '</div>');
$(element).after(div);
}
</script>
Polling Interval
The setTimeout() function accepts a time interval expressed in milliseconds, but I found through experimentation that a two-second response was the best that could be expected. Therefore, the skeleton poll() has a 2000ms interval as its default. If your situation can tolerate a longer delay between poll cycles, then provide a larger value with the onLoad call to poll(), e.g. poll(10000) for a 10-second poll cycle.
Sheets
For a sheet example see How do I make a Sidebar display values from cells?

How to find when reportviewer is loaded using reportviewer api

I have created a single page for all my reports and I am loading different versions of those reports (line, pie, chart, graph, etc) with a toolbar I made. All is working well there, except on the non-table type charts (line,pie,bar,etc). When those get rendered, I found that the text in the legends and series become blurry and through some research here and other places found that they are converted to images, which are then getting resized on me though a css class that is auto generated.
Firstly, what i'm trying to do:
I want to remove this class from the image that is generated at the time it is loaded. If i turn off async rendering on my report
AsyncRendering="false"
Along with this bit of jquery (targeting the div that contains the reportviewer):
$(document).ready(function () {
$('#reportDiv img').removeAttr('class');
});
Then the result is as expected. The image is not scaled and all is well. The problem, however, is that some of these reports may be quite large, resulting in the user not having any visual feedback of whether or not something is happening. I would like to continue using async rendering, so I started to look at the reportviewer javascript api.
Sys.Application.add_load(function () {
var reportViewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
reportViewer.add_propertyChanged(viewerPropertyChanged);
});
function viewerPropertyChanged(sender, e) {
var viewer = $find("ctl00_mainContentPlaceHolder_ReportViewer1");
if (e.get_propertyName() === "isLoading") {
var button = document.getElementById("ctl00_mainContentPlaceHolder_ctlReportParamModuleId1_btnRunReport");
button.disabled = viewer.get_isLoading();
}
else {
if ($find("ctl00_mainContentPlaceHolder_ReportViewer1").get_reportAreaContent() == Microsoft.Reporting.WebFormsClient.ReportAreaContent.ReportPage) {
alert("here");
}
}
}
The first portion (isLoading) works as expected disabling the button. However immediately upon load I get
Object doesn't support property or method 'get_reportAreaContent'
Am I missing something obvious? These are the links from msdn that I used for reference:
reportviewer isLoading
reportviewer ReportAreaContentType

Bar graphs, Line graphs, pie charts, etc. are rendered as images. The images get re-sized based on the size of the report viewer control. Instead of using AsyncRendering="false", I created this javascript workaround and it has solved my problem.
var app = Sys.Application;
app.add_init(ApplicationInit);
function ApplicationInit(sender) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (!prm.get_isInAsyncPostBack()) {
prm.add_endRequest(EndRequest)
}
}
function EndRequest(sender, args) {
var reportViewerControlId = "ReportViewer1";
if (sender._postBackControlClientIDs[0].indexOf(reportViewerControlId) >= 0) {
var reportViewerControlContainer = "reportViewerContainer"; // Id of <DIV>
var renderedReportImage = $("#" + reportViewerControlContainer + " img");
renderedReportImage.removeAttr("style").removeAttr("class");
var styleAttr = renderedReportImage.attr("style");
var classAttr = renderedReportImage.attr("class");
if (typeof styleAttr === 'undefined') {
console.log("Successfully removed the style attribute from the rendered report image!");
}
if (typeof classAttr === 'undefined') {
console.log("Successfully removed the class attribute from the rendered report image!");
}
}
}
Basically, I am listening to the endRequest of the PageRequestManager for my ReportViewerControl's ID, then simply removing the style and class attributes from the image to display it unmodified.

Maximum call stack size exceeded when trying to attach load to img with jQuery

I have a simple image i select with (i've also try on() and one()):
$container.find('.thumbnail img').load(function(){
$container.trigger('resize');
});
For some reason tho I get Uncaught RangeError: Maximum call stack size exceeded. I'm loading these images from an S3 instance if that matters. I know it does redirects a few times, but I dont think that'd matter.
Has anyone run into this or something similar. I don't feel like this should ever be an infinite loop. This also happens intermittently which is more confusing.
The resize stuff:
publicMethod.resize = function (options) {
if (open) {
options = options || {};
if (options.width) {
settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
}
if (options.innerWidth) {
settings.w = setSize(options.innerWidth, 'x');
}
$loaded.css({width: settings.w});
if (options.height) {
settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
}
if (options.innerHeight) {
settings.h = setSize(options.innerHeight, 'y');
}
if (!options.innerHeight && !options.height && $loaded.find('iframe').length == 0) {
var $child = $loaded.wrapInner("<div style='overflow:auto'></div>").children(); // temporary wrapper to get an accurate estimate of just how high the total content should be.
settings.h = $child.height();
$child.replaceWith($child.children()); // ditch the temporary wrapper div used in height calculation
}
if("scrollTop" in options) {
settings.scrollTop = options.scrollTop;
}
$loaded.css({height: settings.h});
publicMethod.position(settings.transition === "none" ? 0 : settings.speed);
}
};

After a couple days of debugging this I finally tracked down the issue. The problem is a shim a developer on the Rails side a few months prior by Paul Irish that overrode an internal jQuery special.add method which completely broke any img.load() stuff. The snippet looks like this (and it's deployed all over the web actually, but doesn't cause an issue until jQuery 1.6-1.7+
/*
* Special event for image load events
* Needed because some browsers does not trigger the event on cached images.
* MIT License
* Paul Irish | #paul_irish | www.paulirish.com
* Andree Hansson | #peolanha | www.andreehansson.se
* 2010.
*
* Usage:
* $(images).bind('load', function (e) {
* // Do stuff on load
* });
*
* Note that you can bind the 'error' event on data uri images, this will trigger when
* data uri images isn't supported.
*
* Tested in:
* FF 3+
* IE 6-8
* Chromium 5-6
* Opera 9-10
*/
(function ($) {
$.event.special.load = {
add: function (hollaback) {
if ( this.nodeType === 1 && this.tagName.toLowerCase() === 'img' && this.src !== '' ) {
// Image is already complete, fire the hollaback (fixes browser issues were cached
// images isn't triggering the load event)
if ( this.complete || this.readyState === 4 ) {
hollaback.handler.apply(this);
}
// Check if data URI images is supported, fire 'error' event if not
else if ( this.readyState === 'uninitialized' && this.src.indexOf('data:') === 0 ) {
$(this).trigger('error');
}
else {
$(this).bind('load', hollaback.handler);
}
}
}
};
}(jQuery));
So if you're working on a large code base that uses jQuery and you're getting call stack exceeded errors while trying to do an image load, this shim was probably added at some point.

Dashcode webapp flickers upon transition, only in iPhone Safari

I created a simple RSS web app using the template in Dashcode. Problem is, when choosing items in the list from the feed the transition flickers (even with the default settings). I am guessing its because of the images in the posts.
I tried disabling the transitions completely but even then I get a flickering when returning to the list. This problem does not appear to affect safari on OSX only on the iphone.
Here is the code that I think is responsible:
var topStories = parseInt(attributes.topStories, 30);
function load()
{
dashcode.setupParts();
// set today's date
var todaysDate = document.getElementById("todaysDate");
todaysDate.innerText = createDateStr(new Date()).toUpperCase();
setupFilters("headlineList");
// This message checks for common errors with the RSS feed or setup.
// The handler will hide the split view and display the error message.
handleCommonErrors(attributes.dataSource,
function(errorMessage) {
var stackLayout = document.getElementById("StackLayout")
if (stackLayout) {
stackLayout.style.display = 'none';
}
showError(errorMessage);
});
// get notifications from the stack layout when the transition ends
document.getElementById("StackLayout").object.endTransitionCallback = function(stackLayout, oldView, newView) {
// clear selection of lists when navigating to the first view
var firstView = stackLayout.getAllViews()[0];
if (newView == firstView) {
document.getElementById("headlineList").object.clearSelection(true);
}
}
}
function articleClicked(event)
{
document.getElementById("StackLayout").object.setCurrentView("articlePage", false, true);
}
function backToArticlesClicked(event)
{
document.getElementById("StackLayout").object.setCurrentView("frontPage", true);
}
function readMoreClicked(event)
{
var headlineList = dashcode.getDataSource('headlineList');
var secondHeadlines = dashcode.getDataSource("secondHeadlines");
var selectedItem = null;
if (headlineList.hasSelection()) {
selectedItem = headlineList.selectedObjects()[0];
} else if (secondHeadlines.hasSelection()) {
selectedItem = secondHeadlines.selectedObjects()[0];
}
if (selectedItem) {
var link = selectedItem.valueForKeyPath('link');
// If the link is an object, not a string, then this may be an ATOM feed, grab the actual
// href from the href attr
if (typeof(link) == 'object') {
link = selectedItem.valueForKeyPath('link.$href');
// If the link is an array (there is more then one link), just grab the first one
if (DC.typeOf(link) == 'array') {
link = link[0];
}
}
window.location = link;
}
}
var headlineListDataSource = {
// The List calls this method once for every row.
prepareRow: function(rowElement, rowIndex, templateElements) {
if (rowIndex >= topStories) {
templateElements['headlineDescription'].style.display = 'none';
templateElements['headlineTitle'].style.fontSize = '15px';
}
}
};

The following CSS rule fixed all of my "-webkit-transition" animation flickering issues on the iPad:
body {-webkit-transform:translate3d(0,0,0);}

I am not sure how well that applies to your problem but in general you should set the backface visibility to hidden if not needed. That will most likely kill all flickering on a page.
-webkit-backface-visibility: hidden;