Opened 4 years ago

Closed 3 years ago

#1625 closed Task (fixed)

CSS3 Support for IE 8 with CSS3PIE

Reported by: greg Owned by: SteveG
Priority: low Milestone: Piwik 1.2
Component: UI - UX (AngularJS, twig, less) Keywords:
Cc: Sensitive: no

Description

I just found the CSS3PIE project, which aims to add CSS3 support to Internet Explorer 8 (and below). I tried this demo in IE8 and it works (rounded corners, css shadow).

Maybe we can integrate this into Piwik.

Change History (29)

comment:1 Changed 4 years ago by vipsoft (robocoder)

There's diminishing value with IE9 approaching, but if CSS3PIE is compatible with jQuery/jQueryUI, and isn't noticeably slower for IE8 users, then it's fine with me.

comment:2 Changed 4 years ago by SteveG (sgiehl)

As there are many big companies still using older browsers like IE7, we should try to optimize the layout for IE. As CSS3PIE works for IE 6,7 & 8 it might be a good choice. I already tried to integrate it and it seems to be quite easy.

comment:3 Changed 4 years ago by vipsoft (robocoder)

Assign the ticket so others know it's being worked on.

WRT browser support. Piwik supports older browsers (e.g., IE5 and above) in piwik.js, but for the dashboard/GUI, we only want to support newer releases otherwise the cross-browser regression testing (and maintenance for backward compatibility) becomes too burdensome. We also have to consider constraints by third-party libs (e.g., jQuery).

comment:4 Changed 4 years ago by SteveG (sgiehl)

  • Owner set to SteveG

comment:5 Changed 4 years ago by SteveG (sgiehl)

CSS3PIE has a dual license: Apache-2 and/or GPL-2 (see http://github.com/lojjic/PIE/blob/master/LICENSE)

Are those licenses compatible with ours?

comment:6 Changed 4 years ago by vipsoft (robocoder)

Fortunately, Apache 2 is compatible with GPL v3.

If it was dual licensed as Apache 2 or GPL (v2 or later), either would be fine.

comment:7 Changed 4 years ago by SteveG (sgiehl)

Ok, fine. I will try to finish a first integration this weekend. If it works stable, I will commit it to trunk, so that others can test it before merging it to the 1.0 branch.

comment:8 Changed 4 years ago by SteveG (sgiehl)

(In [3017]) refs #1625 added CSS3PIE to libs

comment:9 Changed 4 years ago by SteveG (sgiehl)

  • Resolution set to fixed
  • Status changed from new to closed

(In [3018]) fixes #1625 added use of css3pie for ie
tested in ie 7 & 8

comment:10 Changed 4 years ago by vipsoft (robocoder)

(In [3019]) refs #1625 - update legal notice

comment:11 Changed 4 years ago by SteveG (sgiehl)

(In [3020]) refs #1625 do not use css3pie for '.entityTable' - seems to crash IE

comment:12 Changed 4 years ago by matt (mattab)

I tried trunk in IE8 but I don't see rounded corners (calendar, website selector etc.) is it expected?

comment:13 Changed 4 years ago by vipsoft (robocoder)

I'll fix that ... libs/CSS3PIE/PIE.php (a php proxy to server PIE.htc) is probably blocked by libs/.htaccess.

comment:14 Changed 4 years ago by JulienM (JulienMoumne)

(In [3061]) PIE.htc file is now served through piwik static file proxy. See #1527 for more info.

comment:15 Changed 4 years ago by vipsoft (robocoder)

Reference: http://css3pie.com/documentation/known-issues/

IE interprets the URL for the behavior property relative to the source HTML document, rather than relative to the CSS file like every other CSS property.

Is this why rounded corners only appears when the AssetManager is enabled?

comment:16 Changed 4 years ago by JulienM (JulienMoumne)

With ./libs/CSS3PIE/PIE.php, CSS3PIE works with AssetManager enabled and disabled.

I've been looking for a fix but I'm not even able to make it work like it used to, ie. with AssetManager enabled and using:

behavior: url("./index.php?module=CoreHome&action=getPieHtc")

I tried several ways to declare the file :

./index.php, /index.php, index.php, ../../index.php

I looked at any modifications made to Piwik::serveStaticFile() and couldn't find anything that would help me understand.

comment:17 Changed 4 years ago by vipsoft (robocoder)

  • Resolution fixed deleted
  • Status changed from closed to reopened

Strange indeed. I'll reopen for investigation.

comment:18 Changed 4 years ago by vipsoft (robocoder)

  • Resolution set to fixed
  • Status changed from reopened to closed

(In [3157]) fixes #1625 - tested with assetmanger enabled and disabled

comment:19 Changed 4 years ago by vipsoft (robocoder)

Sorry, there are some unrelated changes in that commit. I tried to Ctrl-C that but was too late to abort the commit.

comment:20 Changed 4 years ago by vipsoft (robocoder)

  • Resolution fixed deleted
  • Status changed from closed to reopened

[3158] reverts the last set of changes

comment:21 Changed 4 years ago by vipsoft (robocoder)

(In [3159]) refs #1625 - marking as fix; anomalies appear to be an internal cache issue with IE

comment:22 Changed 4 years ago by vipsoft (robocoder)

  • Resolution set to fixed
  • Status changed from reopened to closed

comment:23 Changed 3 years ago by matt (mattab)

  • Resolution fixed deleted
  • Status changed from closed to reopened

I am using IE8, but I don't see any UI changes (rounded corners, etc.) after the changes in this ticket. Do you see any changes in IE8?

comment:24 Changed 3 years ago by vipsoft (robocoder)

This would be the cache "anomaly". Clearing the browser cache and restarting the browser helps. Make sure IE isn't in compatibility mode.

comment:25 Changed 3 years ago by matt (mattab)

  • Resolution set to fixed
  • Status changed from reopened to closed

Cool, after fixing #1822 I now see the rounded corners in IE.
This CSSPIE library is very intriguing black magic :)

comment:26 Changed 3 years ago by matt (mattab)

  • Resolution fixed deleted
  • Status changed from closed to reopened

I just tried on the demo.piwik.org, with IE8, and I see a Javascript error message in PieHtc:

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Tue, 15 Feb 2011 02:49:38 UTC

Message: 'I.f().images' is null or not an object
Line: 54
Char: 44
Code: 0
URI: t

To replicate, go to dashboard, Add a widget, and hover over the items

comment:27 Changed 3 years ago by vipsoft (robocoder)

(In [3915]) refs #1625 - update to CSS3PIE 1.0beta3

comment:28 Changed 3 years ago by matt (mattab)

  • Milestone changed from Piwik 1.1 to 1.2 Piwik 1.2

comment:29 Changed 3 years ago by matt (mattab)

  • Resolution set to fixed
  • Status changed from reopened to closed

It looks like it fixed it, no more errors in IE. thanks vipsoft!

Note: See TracTickets for help on using tickets.