PDF to HTML5 conversion – display issues with different browsers

One of the big issues in the Browser world has always been getting your HTML to look and work the same in different Browsers. It was always one of my hopes with HTML5 that this would improve…

Here is an interesting issue in an HTML file. It appears that the Raster order works differently in Safari compared to Firefox and Chrome on the Mac (interestingly it is not an issue with Safari on my IPad).

Have a look at the 3 screenshots above. They are displaying this HTML page. The page contains a white box which is drawn on the Canvas. In Safari this is drawn over the text while Chrome and Firefox put the canvas behind the text. I am not sure which one is technically correct, but having different behaviour with the Canvas and text between different versions of Safari is a major issue in using HTML files 🙁

Is this a bug (and  is there a work around?). What do you think?

Click here to see all the articles in the PDF to HTML5 conversion series.

This post is part of our “HTML5 Article index” in these articles, we aim to help you understand the world of HTML5.

Related Posts:

The following two tabs change content below.

Mark Stephens

System Architect and Lead Developer at IDRSolutions
Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.
Markee174

About Mark Stephens

Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX.

He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>