Absolutely positioned elements broken by update to CSS

[Robert Schroll]

My app Crosswords [1] uses absolute positioning to layout most of its elements. A year ago, it worked with the toolkit; now it's broken. I believe the problem was caused in 168.3.21, which added the rule:

html, body,
[data-role="mainview"],
[data-role="content"] {
    position: relative;
    width: 100%;
    height: 100%;
}

This means absolutely positioned elements inside the content will be positioned in reference to the content element. Before, all of these elements had been statically positioned, so absolutely positioned elements were positioned relative to the viewport.

[1] https://github.com/rschroll/crosswords

[Robert Schroll (rschroll)]

The fundamental problem here is that CSS doesn't offer any separation between a "public API" and private implementation details. And because they're "cascading", a basic change can end up affecting all sorts of elements.

While we could fix this particular problem, avoiding this class of problems is more difficult. Some ideas:
1) Don't ship the toolkit on the device. Make developers include a known-good version in their app.
2) Aggressive versioning. Every time you make a change that could break apps, bump a version number. But this would required app authors to keep updating their apps. Also gives a bunch of versions to potentially backport fixes to. I don't see that this is any better than (1).
3) Publish a supported implementation "API" -- particular layout and display techniques that will be guaranteed to work. Developers can either stick with those and use the system toolkit or implement more complicated layouts and ship a known-good version of the toolkit in their packages.

[David Barth (dbarth)]

To avoid regressions due to toolkit updates, we now recommend to embed the
CSS directly inside your app and rewrite your include rules to reference
the local version instead.

This branch contains a small script to help with this process:
https://code.launchpad.net/~dbarth/ubuntu-html5-theme/cmdline-tool/+merge/253498

On Tue, May 5, 2015 at 11:49 AM, Robert Schroll <email address hidden> wrote:

> Public bug reported:
>
> My app Crosswords [1] uses absolute positioning to layout most of its
> elements. A year ago, it worked with the toolkit; now it's broken. I
> believe the problem was caused in 168.3.21, which added the rule:
>
> html, body,
> [data-role="mainview"],
> [data-role="content"] {
> position: relative;
> width: 100%;
> height: 100%;
> }
>
> This means absolutely positioned elements inside the content will be
> positioned in reference to the content element. Before, all of these
> elements had been statically positioned, so absolutely positioned
> elements were positioned relative to the viewport.
>
> [1] https://github.com/rschroll/crosswords
>
> ** Affects: ubuntu-html5-theme
> Importance: Undecided
> Status: New
>
> --
> You received this bug notification because you are subscribed to Ubuntu
> HTML5 UI SDK.
> https://bugs.launchpad.net/bugs/1451937
>
> Title:
> Absolutely positioned elements broken by update to CSS
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/ubuntu-html5-theme/+bug/1451937/+subscriptions
>

[David Barth (dbarth)]

Assigning and adding a task milestone to land the cmd-line tool branch

[Robert Schroll (rschroll)]

From UOS yesterday:

<rschroll> QUESTION: What's the current recommendation about shipping HTML5 toolkit files? Should we include our own versions in our packages or use the system files?
<alex-abreu> rschroll, we will support both options, if you want to really control the updates cycles for your app, you can host it otherwise use the system one which will benefit from bug fixes and UI updates
<alex-abreu> rschroll, we will land a few API breaking updates in the UI and JS SDK, .. but we will make sure that they dont break the existing apps

We need to decide whether using the system theme files is supported or not. If it is, we need to avoid problems like this. If not, then there shouldn't be system them files -- we should put them automatically in each new HTML5 project. (In practice, we need to keep the existing theme files for existing apps, but it should not be updated.) I don't really care which, but we need to clarify this story.

[Launchpad Janitor (janitor)]

This bug was fixed in the package ubuntu-html5-theme - 0.1.2+15.10.20150520-0ubuntu1

---------------
ubuntu-html5-theme (0.1.2+15.10.20150520-0ubuntu1) wily; urgency=medium

  [ Alexandre Abreu ]
  * Fix gallery & component showcase (LP: #1450614)
  * Fix page actions; no need to create actions when none is defined
    (LP: #1455622)
  * Update debian/control to remove qt private package deps; Rely on Qt
    5.4's new API (LP: #1387537)

  [ CI Train Bot ]
  * New rebuild forced.

  [ David Barth ]
  * Add a command line tool to maintain a theme installation in an html5
    project (LP: #1451937)

 -- CI Train Bot <email address hidden> Wed, 20 May 2015 16:51:40 +0000